ウェブデザイン、ブランディング、データビジュアライゼーション向けのプロがキュレーションしたカラーパレット。クリックでHEXコードをコピー、またはパレット全体をエクスポート。
Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
ブランドの価値とターゲット層から始めましょう。色彩心理学をガイドとして使用してください：青は信頼とプロ意識、緑は成長と自然、赤は緊迫感や情熱、紫は高級感や創造性を表します。主要パレットを3〜5色に限定してください。アクセシビリティのために十分なコントラスト（4.5:1比）を確保してください。
60-30-10ルールはバランスの取れた色使いのためのデザイン原則です：60%主要色（背景、大きな領域）、30%副次色（カード、サイドバー、UI要素）、10%アクセントカラー（ボタン、ハイライト、CTA）。これにより視覚的な階層が生まれ、調和が保たれます。ニュートラルカラーは現代UIデザインでは60%のベースを形成することが多いです。
WCAG 2.1は通常テキストに最低4.5:1のコントラスト比、大きなテキストに3:1を要求しています。WebAIM Contrast CheckerやブラウザのDevToolsなどのツールで確認してください。情報伝達に色だけに頼らず（アイコン/テキストも使用）、色覚シミュレーターでテストし、インタラクティブ要素に可視のフォーカス状態があることを確認してください。
Web開発向け：CSS用のHexコード（#RRGGBB）、動的操作用のRGB/HSL値、テーマ用のCSS Custom Properties。デザインツール向け：ほとんどがHexコードを受け入れ、FigmaとSketchはカラーライブラリをサポート。Tailwind CSS向け：tailwind.config.jsのtheme.extend.colorsで色を定義。ブランディング向け：Pantone（印刷）、CMYK（印刷）、RGB（画面）の値を含める。