TomasValleDuran/color-theory

インターフェースのための色彩理論

UIにおける色は、ほとんどが明度の問題であり、色相はその衣をまとっているに過ぎません。階層、コントラスト、可読性、ダークモードはすべて明度によって決まります。色相はアイデンティティと意味を伝え、彩度（クロマ）は強調を伝えます。この順序で作業を進めてください。

ツールキット — 推測の代わりにこれを使う

scripts/palette.py（Python 3、依存関係なし）はOKLCHですべてを計算し、sRGBに色域マッピングします。コントラスト比を目視で確認したり、手作業でランプを考案したりする必要はもうありません。

S=<skill-dir>/scripts/palette.py   # <skill-dir> = このスキルがロードされたときに表示されるベースディレクトリ
python3 $S system "#6d28d9"                    # フルシステム：すべてのペアを検証したランプ＋ライト/ダークロール
python3 $S system "#6d28d9" --format tailwind  # Tailwind v4 @theme + セマンティック変数（css, json = DTCG も可）
python3 $S ramp "#0f766e" --format css         # 50〜950までの単一ランプ（入力は最も近いステップにスナップ）
python3 $S neutral "#0f766e" --tint 0.01       # ブランド色相に向けてティントされたグレーランプ
python3 $S contrast "#fff" "#7c3aed"           # WCAG比率＋レベル＋APCA Lc
python3 $S cvd "#16a34a" "#dc2626" "#2563eb"   # 色覚障害シミュレーション＋混同しやすいペアの表示
python3 $S harmony "#6d28d9" --scheme split    # OKLCHでの色相関係
python3 $S convert "hsl(...)/#hex/oklch(...)"  # 表記法変換＋その色の鮮やかさの表示

systemは、ペアが基準を満たさない場合（例：text-mutedを4.5:1になるまで暗くするなど）、ランプに沿ってステップを自動的に調整し、その調整内容をすべて出力します。これらは設計上の判断ですので、ユーザーに伝えてください。

ワークフロー：「色が必要」からトークンを出荷するまで

1. アンカーを見つける。 既存のブランドカラーがある場合はそれを使います。ない場合は、製品の個性（下記の「色相の選び方」を参照）から導出し、2〜3のシードを、それぞれ一行の根拠とともに提案します。単一の恣意的な選択は避けてください。
2. palette.py system <seed>でシステムを生成する。 アクセントランプ1つ、ニュートラルランプ1つ、そして製品が実際にレンダリングするステータスランプだけです。
3. セマンティックロールにマッピングする。 コンポーネントでプリミティブ（--color-accent、--color-text-muted、--violet-600ではない）を直接使ってはいけません。デザインシステム構築スキルがトークンアーキテクチャを詳しくカバーしています。
4. 検証する： レンダリングされたペアのコントラスト（実際のサーフェス上のテキスト、アルファ/オーバーレイも含む）、両方のテーマ、および色分けされた意味（チャート、ステータス、タグ）に対するCVDチェックを実施します。
5. 抑制を効かせて適用し（下記参照）、 レンダリング結果を確認します。

色の量：配分

• ニュートラルが約90%の仕事をする。 背景、サーフェス、テキスト、境界線。優れたニュートラルに1つのアクセントを加えたUIは、ほとんどの場合、多色のものよりプロフェッショナルに見えます。
• 60-30-10は便利な目安です：約60%が支配的なニュートラル、30%がセカンダリサーフェス/ニュートラルのバリエーション、10%がアクセントです。アクセントがピクセルの約10～15%を超えると、「ここで行動して」という意味を失います。
• 1ビューにつき塗りつぶしのプライマリアクションは1つ。 ボタンの背景色は離れた場所からでもプライマリとして読まれます。色付きテキストはリンクとして読まれます。
• 1つの色に1つの意味。 バイオレットが「ブランド/インタラクティブ」を意味するなら、カテゴリタグにもそれを使ってはいけません。ステータス色相はアクセントから明確に離れている必要があります（ツールはOKLCH色相で25°以上を維持します）。
• 色は決して唯一の信号ではない。 男性の約8%、女性の約0.5%が色覚障害を持っています。色とアイコン、ラベル、パターン、位置を組み合わせてください。

色相の選び方（ブランドがない場合）

連想は文化に依存し、実行力と比べて弱いものです — どんな色相でも適切に構築されたパレットは、「心理的に正しい」色相を下手に使ったものより優れています。以下の表は決定打にならない場合の参考として使ってください：

色相ファミリー	一般的なUIでの読み	代表的な製品	注意点
青 / インジゴ	信頼、冷静、能力	フィンテック、SaaS、ヘルスケア、エンタープライズ	最も一般的な選択；目立たせるには彩度を上げるか、インジゴ/シアンにシフトする
バイオレット	クリエイティブ、プレミアム、「AI」	クリエイティブツール、AI製品	非常に彩度の高いバイオレットは今や「AIスロップ」の印
緑 / ティール	成長、お金、健康、成功	金融、サステナビリティ、ウェルネス	「成功」ステータスと競合する — ステータス色相を調整する
赤 / ローズ	エネルギー、緊急性、情熱	食品、メディア、エンターテイメント	「危険」と競合する；ブランドの瞬間に使い、破壊的なアクションとは区別する
オレンジ / アンバー	暖かさ、親しみやすさ、行動	消費者向け、食品、マーケットプレイス	暗いオレンジは茶色くなる；ライトモードの塗りつぶしを確認する
黄 / ライム	楽観、注意	消費者向け、遊び心	白いテキストを載せられない；黄色の塗りつぶしには暗いテキストを使うか、ブランドをアクセントとして控えめに使い、塗りつぶしにはより暗いステップを選ぶ（--hue-shift -15 で色合いをオリーブではなくゴールドに保つ）
ニュートラルに近い（黒/ストーン/サンド）	高級、エディトリアル、ツール	開発ツール、ファッション、ポートフォリオ	タイポグラフィと空間の技巧が必要で、そうしないと空虚に感じられる

知っておくべき地域的な注意点：赤は中国では幸運/お祝いですが、西洋の金融では損失を意味します（中国/日本の株価ティッカーでは上昇）。白は東アジアの一部で喪と関連付けられます。金融UIの場合、上げ/下げの色は設定可能にしてください。

知覚色 — OKLCHがなぜ重要なのか

HSLの明度は嘘をつきます：hsl(60 100% 50%)（黄色）とhsl(240 100% 50%)（青）は「L=50%」を共有していますが、知覚される明るさは大きく異なります。そのため、HSLランプはコントラストが不均一で、色相間で暗い/明るいステップが一致しません。

OKLCH = L（知覚明度 0–1）· C（彩度、約0–0.37）· H（色相角）。Lが等しい = 色相間で知覚される明るさがほぼ等しい。つまり：

• 異なるランプの同じステップ（すべての-600）は、白に対するコントラストが同程度になります。
• 明度を変えずに色相を回転させることができます（ハーモニー、「マッチする」ステータスカラー）。
• ダークモードはLについて推論することで導出できます。

注意点：sRGB色域は不規則です — 各色相は各Lで異なる最大彩度を持ちます（黄色はL≈0.95でピーク、青はL≈0.45でピーク）。ツールは彩度を下げることで色域マッピングを行い、LとHを維持します。広色域（Display-P3）色は拡張機能です：まずsRGB値を宣言し、次に@media (color-gamut: p3)内でP3/oklch()の鮮やかな値を宣言します。

CSSは最新のブラウザすべてでoklch()をサポートしています。新しいWebプロジェクトではこれを使用してください。ネイティブプラットフォームでは、プラットフォームの表記法（hex/sRGB、Color(red:green:blue:)、Color(0xFF…)）に変換します — ツールの--notation hexが役立ちます。

ランプ、ニュートラル、ティント

• ランプは一貫して1つの色相を保持し、明るい端（背景があり、目が最も敏感な場所）でステップが細かくなり、ランプの中間で彩度がピークになります。11ステップ（50–950、Tailwind規則）または12ステップ（Radix規則、各ステップに名前付きの役割があります）— 役割マップについてはreferences/ramps-and-roles.mdを参照してください。
• ティントニュートラル：グレーにブランド色相を少し混ぜます（彩度 ≈ 0.005–0.02）。これによりUI全体にまとまりが生まれます。彩度の高いアクセントの隣では、純粋な#808080のグレーは死んだように感じられます。暖色系ブランド → 暖色系グレー；寒色系 → 寒色系。
• ブランドUIの長文テキストに、純粋な黒を純粋な白の上に決して使わないでください。ニアブラック（ニュートラル-950）をニアホワイトにすることでギラつきを軽減できます。ダークモードの純粋な黒の背景は、スクロール時にOLEDで滲みを引き起こします。L≈0.13–0.18を使用してください。

ダークモードは反転ではない

• 浮き上がりは明るくなります。影が暗くなるのではありません：サーフェス > 背景 約0.03–0.06 L。
• アクセントを少し彩度を下げ、明度を上げます。中間色の高彩度色は暗い背景上で振動して見えます。
• 本文テキストはわずかにオフホワイト（ニュートラル-50/100）、控えめなテキストはニュートラル-400程度。
• 塗りつぶしは多くの場合、ラベルを暗いテキストに反転します（ツールがコントラストに基づいて決定します）。
• すべてのペアを再測定してください。コントラストは反転後に維持されません。references/dark-mode.mdを参照してください。

コントラスト — 標準

ペア	WCAG 2.2 AA	AAA	APCAガイダンス（参考）
本文テキスト（<24px / <18.66px bold）	4.5:1	7:1	Lc 75以上（90推奨）
大きなテキスト（≥24px または ≥18.66px bold）	3:1	4.5:1	Lc 60以上
UIコンポーネントと理解に必要なグラフィカルオブジェクト（入力ボーダー、アイコン、フォーカスリング、チャートマーク）	3:1 (SC 1.4.11)	—	Lc 45以上
無効なコントロール、装飾要素、ロゴ	免除	—	—

WCAG 2.xは法的/コンプライアンスのベースラインです（ADA、EN 301 549 / European Accessibility Act）。APCA（WCAG 3の候補）は、特にダークモードと明るいテキストに対して知覚をより適切にモデル化しますが、WCAG 3はまだ確定していません — WCAG 2.2 AAを満たし、APCAをセカンドオピニオンとして使用してください。詳細、フォーカスリングのルール、落とし穴についてはreferences/contrast-and-cvd.mdを参照してください。

グラデーション、オーバーレイ、アルファ

• グラデーションはin oklabで補間します（スムーズで、中途半端な濁りがありません）。中間で灰色になるのを避けるため、多色のスイープにはin oklchを使用します。テキストの後ろの背景には、明度が近いストップを保ちます。
• 画像上のテキスト：スクリム（グラデーションオーバーレイ）またはソリッドなバッキングを使用し、最悪の領域を測定します。
• アルファカラー（/50、rgba）は、下にあるものによってコントラストが変わります。テキストにはソリッドトークンを優先し、アルファはオーバーレイ、ホバー、シャドウのために予約します。

データ可視化

カテゴリカルパレットは、おおよそ等しい明度と最大の色相分離が必要です。順序パレットは単調に明度が変化します。発散パレットはニュートラルな中間点を共有します。利用可能な場合はdatavizスキルを使用してください — 検証済みのパレットメソッドがあります。チャート系列の色には必ずpalette.py cvdを実行してください。

誰かの色をレビューする — クイックチェックリスト

• すべてのテキスト/背景ペアが両方のテーマで測定されている（推定ではない）
• 入力ボーダー、フォーカスリング、意味を伝えるアイコンが3:1以上
• コンポーネントに生のhex/rgbはなく、セマンティックトークンのみ
• 1つのアクセントで、インタラクティブ/プライマリの意味にのみ使用
• ステータスカラーがアクセントと、またCVDシミュレーション下で互いに区別できる
• ニュートラルが一貫してティントされている（寒色系と暖色系のグレーが混在していない）
• ダークモードが設計されている（浮き上がりのための明るいサーフェス、調整されたアクセント）、反転ではない
• 意味が決して色だけで伝えられていない

重大度順の所見を含む完全なカラーシステム監査には、better-colorsスキルが優れています。色の選択/導出/生成については、このスキルを引き続き使用してください。

参考文献

• references/ramps-and-roles.md — ステップごとのロールマッピング（Tailwind 50–950およびRadix 1–12）、状態色（ホバー/アクティブ/無効/選択）
• references/dark-mode.md — ダークテーマの構築、浮き上がり、プラットフォーム固有の詳細（iOSセマンティックカラー、Materialトーンサーフェス）
• references/contrast-and-cvd.md — WCAG 2.2の詳細、APCAレベル、フォーカスインジケーター、CVD設計ルール
• references/harmony-and-brand.md — ハーモニースキーム、セカンダリカラーの導出、ブランドからUIへの変換、色温度、同時コントラスト