• Created:2026/03/04
• Updated:2026/03/07
• Author:
  Takeshi Takatsudo

カラーパレット戦略

問題

AIエージェントは色を個別に生成しがちです。プライマリカラーのブルーをここで選び、アクセントのグリーンをそこで選ぶ、というように、色同士の体系的な関係がありません。結果として、パレットが恣意的に感じられます。色が衝突し、調和せず、予測可能な構造もありません。パレット戦略がなければ、デザインは色数が多すぎて階層が不明確になり、セマンティックな役割（危険状態、ミュートされたテキスト色など）も欠けてしまいます。HSLの知覚的な不整合と組み合わさると、AIが生成したパレットは理論的には正しそうに見えても、見た目がおかしくなることがよくあります。

解決方法

パレット戦略は3つの層で機能します。

1. カラーハーモニー — どの色相を使い、色相環上でどのように関係するか
2. セマンティックアーキテクチャ — カラーグループに役割（プライマリ、ニュートラル、フィードバック）を割り当てる
3. 知覚的一貫性 — シェードが意図通りに視覚的に見えるよう OKLCH を使う

カラーハーモニー戦略

カラーハーモニー（color harmony）は、どの色相が組み合わさり、その理由を定義します。主要な5つの戦略は次の通りです。

• モノクロマティック — 1つの色相で明度とクロマを変えたもの。安全で一体感があり、衝突しない。
• 補色（Complementary） — 色相環上で対面する2つの色相（約180°離れた）。高コントラストでエネルギッシュ。1つをドミナント、もう1つはアクセントのみに使う。
• アナロガス（Analogous） — 隣接する3つ以上の色相（それぞれ±30°）。自然で落ち着いた雰囲気で、背景に微妙な変化をつけるのに最適。
• トライアディック（Triadic） — 等間隔に並んだ3つの色相（120°ずつ）。鮮やかでバランスが良いが、制御が難しい。3つのうち2つはクロマを低くする。
• スプリット補色（Split-complementary） — 1つの色相と、その補色の両隣にある2つの色相（反対側から±30°）。補色の緊張感を持ちながら、不快な衝突を避けられる。

カラーハーモニー戦略

デザインカラーパレットの構築

完全なパレットは4つの層で構成されます。

プライマリ、セカンダリ、アクセント

プライマリカラーはブランドを象徴し、インタラクティブな要素（リンク、ボタン、フォーカスリング）をすべて担います。セカンダリはサイドバーやセクションヘッダーなどの領域でプライマリを補助します。アクセントは最も重要な瞬間（CTA、バッジ、通知）を強調するもので、視覚的な領域の10%以下に抑える必要があります。

ニュートラル/グレースケール

ニュートラルはUIの大部分を担います。背景、サーフェス、ボーダー、テキストです。近白色から近黒色まで8〜10ステップを使います。ブランドカラーの色相方向にわずかにクロマを持つニュートラル（低クロマ）は、純粋なグレーよりも洗練された印象を与えます。

フィードバックカラー

すべてのUIはシステム状態のためのセマンティックカラーが必要です。

• 成功（Success） — グリーン（色相約150）
• 警告（Warning） — アンバー（色相約65）
• 危険/エラー（Danger/Error） — レッド（色相約25）
• 情報（Info） — ブルー（色相約220）

同じシステムに属しているように感じられるよう、明度を統一してください。

60-30-10ルール

インテリアデザイン由来のクラシックな比率で、UIにも直接応用できます。

• 60% — ドミナントニュートラル（背景、サーフェス、ページの大部分）
• 30% — セカンダリサポートカラー（サイドバー、ヘッダー、セカンダリアクション）
• 10% — アクセント（CTA、ハイライト、重要なインタラクション）

60-30-10ルールの可視化

コード例

モノクロマティックパレットの実践

1つの色相を異なる明度で使うことで、完全なインターフェースに十分な視覚的多様性が生まれます。最も暗いシェードをテキストに、中間のシェードをインタラクティブ要素に、薄いシェードを背景や微妙なアクセントに使います。

モノクロマティックUI — 1つの色相をカードに適用

補色カラースキーム

補色を高コントラストのアクセントとして使います。自然と視線を引きつけます。ページ上で最も重要な1つのアクションのためだけに使いましょう。

補色 — ブループライマリ + オレンジアクセント

完全なデザイントークンパレット

適切に構造化されたトークンセットは、コンポーネントを構築する前にすべてのカラーロールを定義します。この例では OKLCH を使い、すべての色相グループで知覚的な明度を統一しています。これらのトークンをパレット、テーマ、コンポーネントの各層に整理するアーキテクチャの全体像については、Three-Tier Color Strategy を参照してください。

:root {
  /* プライマリ — ブルー、OKLCHの色相264 */
  --color-primary-50:  oklch(96% 0.04 264);
  --color-primary-100: oklch(90% 0.07 264);
  --color-primary-500: oklch(55% 0.2  264);
  --color-primary-700: oklch(38% 0.17 264);
  --color-primary-900: oklch(22% 0.1  264);

  /* ニュートラル — ほぼ無彩色、色相方向のティント */
  --color-neutral-50:  oklch(98% 0.005 264);
  --color-neutral-200: oklch(88% 0.01  264);
  --color-neutral-500: oklch(55% 0.01  264);
  --color-neutral-700: oklch(38% 0.015 264);
  --color-neutral-900: oklch(18% 0.015 264);

  /* フィードバック — すべての色相で同じ明度（58%） */
  --color-success: oklch(58% 0.18 150); /* green */
  --color-warning: oklch(58% 0.18 65);  /* amber */
  --color-danger:  oklch(58% 0.2  25);  /* red   */
  --color-info:    oklch(58% 0.18 220); /* blue  */

  /* セマンティックエイリアス — コンポーネントが参照するトークン */
  --color-bg:              var(--color-neutral-50);
  --color-surface:         oklch(100% 0 0);
  --color-border:          var(--color-neutral-200);
  --color-text:            var(--color-neutral-900);
  --color-text-muted:      var(--color-neutral-500);
  --color-interactive:     var(--color-primary-500);
  --color-interactive-fg:  oklch(98% 0.01 264);
}

デザイントークンパレット — プライマリ + ニュートラル + フィードバック

OKLCHを使った体系的なパレット生成

OKLCHの主な利点は、明度とクロマを固定して色相を回転させると、得られるすべての色が同じ知覚的な明るさを持つことです。これが体系的な多色パレットを可能にします。

/* すべての色が同じ視覚的な強さを持つカテゴリカルパレットを生成 */
:root {
  --palette-l: 62%;
  --palette-c: 0.18;

  --cat-red:     oklch(var(--palette-l) var(--palette-c) 25);
  --cat-orange:  oklch(var(--palette-l) var(--palette-c) 60);
  --cat-yellow:  oklch(var(--palette-l) var(--palette-c) 90);
  --cat-green:   oklch(var(--palette-l) var(--palette-c) 150);
  --cat-cyan:    oklch(var(--palette-l) var(--palette-c) 200);
  --cat-blue:    oklch(var(--palette-l) var(--palette-c) 264);
  --cat-purple:  oklch(var(--palette-l) var(--palette-c) 310);
}

/* 単一のブランド色相から明度スケールを生成 */
:root {
  --brand-h: 264;
  --brand-c: 0.18;

  --brand-50:  oklch(96% calc(var(--brand-c) * 0.3) var(--brand-h));
  --brand-100: oklch(90% calc(var(--brand-c) * 0.5) var(--brand-h));
  --brand-300: oklch(74% calc(var(--brand-c) * 0.8) var(--brand-h));
  --brand-500: oklch(55% var(--brand-c)              var(--brand-h));
  --brand-700: oklch(40% calc(var(--brand-c) * 0.9) var(--brand-h));
  --brand-900: oklch(24% calc(var(--brand-c) * 0.7) var(--brand-h));
}

カラーツールとリソース

カラーパレットの構築、テスト、改善に役立つツールです。

• Adobe Color — すべてのハーモニールールに対応したインタラクティブな色相環と、コントラスト比が不十分な色をチェックするアクセシビリティチェッカー。
• OKLCH Color Picker — OKLCH空間で直接色を選択・調整できるツール。ガモットの可視化機能付き。OKLCHパレットの構築に欠かせません。
• Tailwind CSS Colors — 22色相に対して丁寧に作られた10ステップのスケール。プロフェッショナルな明度スケールがどのように構成されているかを学ぶのに最適な参考資料です。
• Coolors — ハーモニールールの提案、コントラストチェッカー、エクスポートオプションを備えた高速パレットジェネレーター。
• Realtime Colors — 抽象的なスウォッチではなく、実際のウェブサイトレイアウト上でパレットをプレビューできます。構築前に問題を発見するのに役立ちます。
• Vercel Geist Colors — Vercelのデザインシステムパレット。本番グレードのニュートラル＋セマンティックトークンシステムのクリーンな事例です。
• Huetone — APCAベースのパレットビルダー。知覚的にバランスの取れた明度スケールを、コントラストチェック機能付きで生成します。
• ColorSlurp — OKLCHサポートとパレット管理機能を持つデスクトップカラーピッカー。

AIがよくやるミス

• ハーモニーの関係を確立せずに色を1つずつ生成する — 結果はパレットではなく色の寄せ集めになる
• HSLを使って「一貫した」明度スケールを作ろうとする — hsl(60, 100%, 50%) と hsl(240, 100%, 50%) の知覚的な明るさは全く異なる
• 補色のアクセントを選び、UIの40%にフル彩度で使う — 補色はアクセント（10%以下）としてのみ機能する
• パレットからフィードバックカラー（success、warning、danger、info）を省略する — コンポーネントが参照するトークンがなくなり、ハードコードされた一時的な色が生まれる
• クロマがゼロの純粋なグレー（oklch(n% 0 0)）を使う — 生気がなく感じられる。ブランドカラーの色相方向にわずかにクロマを加えるとデザインに馴染む
• セマンティックトークン15個の代わりに、コンポーネントに40個の一時的な色値を定義する — ブランドカラーが変わったときの保守が悪夢になる
• パレットを固定されたものとして扱う — 優れたトークンシステムは --brand-h を1つ更新するだけでブランドカラーを全体に反映できる

使い分け

• デザインシステムのセットアップ — コンポーネントを書く前に、完全なパレットをトークンとして定義する
• 多色UI — ハーモニールール（アナロガス、トライアディック）を使って競合しない色相を選ぶ
• データビジュアライゼーション — 同じOKLCH明度のカテゴリカルパレットで、1色が他を圧倒しないようにする
• ダークモード — 適切に構造化されたトークン層（生の値にセマンティックエイリアスを重ねた構造）で、ダークモードを完全な書き直しではなくパレットの切り替えにする
• アクセシブルな色選択 — テキストと背景の間のOKLCH明度差を45%以上に保つことで、安定したコントラストを確保する

完全なパレット戦略が過剰になる場合

• 1つのブランドカラーしかなく、複雑なUI状態もないシングルページのランディングサイト
• トークンがメリットよりもオーバーヘッドになる簡単なプロトタイプ
• OKLCHサポートが限られるメールテンプレート — hexを使い、広くテストする

参考リンク

• Adobe Color — color wheel and harmony tool
• OKLCH Color Picker
• Tailwind CSS default color palette
• Realtime Colors — preview palette on a live layout
• Coolors — palette generator
• Huetone — APCA palette builder
• Vercel Geist Design System — Colors
• MDN: oklch()
• OKLCH in CSS: why we moved from RGB and HSL — Evil Martians
• Color theory for designers — Smashing Magazine