color-system

カラーシステム

概要

4つの領域（WebアプリのUI、マーケティング／ランディングページ、データビジュアライゼーション、ターミナル／TUI）に対応した、すぐに使える厳選カラーパレット（ライト＋ダーク）と、新しいパレットを作成してアクセシビリティを確認するための手法をまとめたライブラリです。

基本原則： 色相そのものではなく、意味上の役割（背景、テキスト、プライマリ、エラーなど）に基づいて色を選びます。ここにあるすべてのパレットでは、16進数カラーコードが役割に割り当てられているため、テーマを切り替え可能で一貫性があり、アクセシブルな状態に保てます。まず役割を選び、その後に対応する16進数カラーコードを確認します。役割を使うべき場所に16進数カラーコードを直接ハードコードすると、後からテーマを変更する際に問題が生じます。

ナビゲーション

以下のインデックスと役割のルールを見れば、それだけで「どのパレットを選ぶべきか」がわかります。タスクで具体的な情報が必要な場合は、すべてではなく、該当するリファレンスファイルを1つ読み込んでください。

読み込むファイル	使用する場面
references/carbon.md	Carbon を使用するページや成果物を作成する場合は、このファイルだけを読んでください。ライト／ダーク両モードの Carbon の役割、ダッシュボードキット、トライアドが記載されています
references/palettes.md	その他のパレットの16進数カラーコードが必要な場合に使用します。4つの領域のライト／ダークパレット、塗り・控えめ・強調のトライアド、Dusk、Driftwood、Meadow の基になる12段階スケールが記載されています
references/contrast.md	WCAG／APCA のしきい値、色覚特性への配慮を確認する場合や、コントラスト要件を満たさない色の組み合わせを調査する場合に使用します
references/build-your-own.md	ライブラリ内に適したパレットがなく、新しいスケールを生成する場合に使用します（OKLCH のレシピ）
references/theory.md	配色調和の方式を選ぶ場合や、色空間／スケールの選択理由を説明する場合に使用します

パレットライブラリ（クイックインデックス）

最初に選ぶパレットとして適しているものには ⭐ を付けています。マーケティングと TUI には標準のパレットはありません。ブランドやユーザー自身のターミナルテーマに合わせて選ぶためです。

WebアプリのUI — ライト＋ダーク、13の意味的役割と各色のトライアド

• Carbon ⭐ (デフォルト) — 深みのあるスレートブルーで、ダークモードを優先しています。分析ダッシュボード、パフォーマンスレポート、開発ツール向けです。ダッシュボードキット一式（A〜F のグレードピル、順序付きステージシーケンス、インラインコードのトーン、成功時のハイライト）を備えています。ライトモードを細部まで手作業で調整し、ダークモードと同等に仕上げる必要がある場合は、代わりに Graphite を選んでください。
• Graphite — クールなスレートとブルー。情報量の多いB2Bダッシュボードや開発ツール向けで、ライト／ダークの同等性を重視する場合のデフォルトです。
• Evergreen — 真のニュートラルなジンクに、エメラルドのブランドカラーを組み合わせています。みずみずしく、自信に満ちた、ブルー系ではないアイデンティティに適しています。
• Terracotta — 温かみのあるクレイ／エスプレッソのニュートラルカラーと、錆色のアクセント。エディトリアル、コンテンツプラットフォーム、ライティングツール向けです。
• Bloom — パステル調のペリウィンクル／バイオレットと、深いダークモード。親しみやすい開発ツールや、遊び心がありつつすっきりしたアプリ向けです。
• Teal Slate — クールなスレートに深いティールを合わせ、暖色系のアクセントを1色加えています。技術レポート、SRE／レート制限ダッシュボード向けです。数値には等幅フォントがよく合います。

12段階の OKLCH スケールから生成されており、拡張や再生成ができるよう、役割の定義とともに提供されています。

• Dusk — インディゴのプライマリ、ターコイズのアクセント、ほぼニュートラルなクールグレー。集中ツール、エディター、長時間利用するアプリ向けです。
• Driftwood — 温かみのある砂色のニュートラルカラーに、深いマリンブルーのプライマリとクレイのアクセントを合わせています。ダークモードでニュートラルカラーの色味がクールに変化する唯一のパレットです。
• Meadow — 落ち着いたセージのプライマリ、アンティークゴールドのアクセント、温かみのある骨色のニュートラルカラー。最も柔らかな印象のパレットで、自信を感じさせるというより、心安らぐデザインに適しています。

マーケティング／ランディングページ — ライト＋ダーク、ヒーローグラデーション

• Sunbloom — 洗練されたコーラル／アンバーの温かみ。親しみやすさを重視する消費者向け／クリエイター向けブランドに適しています。
• Tidewater — ティール／セージ。フィンテック、ウェルネス、信頼を重視するB2B向けです。
• Obsidian & Gold — ほぼ黒のカラーとメタリックゴールド。プレミアム、ラグジュアリー、エージェンシー向けです。
• Paper & Ink — 温かみのある紙色、インクのような黒、テラコッタのアクセント1色。ブログ、長文コンテンツ、ポートフォリオ向けです。

データビジュアライゼーション — 色覚特性に配慮した暖色／寒色のアースカラー

• カテゴリ別： Lunar Valley ⭐ (デフォルト) · Hearthstead · Vintage Warm · Glass Wall · Okabe-Ito (色覚多様性への配慮が必須の場合に使用)
• 連続値： Viridis ⭐ (デフォルト) · Magma · Inferno · Plasma · ColorBrewer Blues · YlOrRd (すべて知覚的に均一です)
• 発散値： Console & Window ⭐ (デフォルト) · Alien Sun · Orchard Dusk · Coffee & Coolant — いずれも暖色と寒色の組み合わせで、赤と緑の組み合わせはありません。

ターミナル / TUI — 16 色の ANSI カラー＋背景色／前景色／カーソル／選択範囲

• Solarized Dark · Nord · Catppuccin Mocha · Catppuccin Latte (唯一のライトスキーム) · Dracula · Tokyo Night

→ 完全な 16 進数カラー表： Carbon は references/carbon.md、その他のすべてのパレットは references/palettes.md

セマンティックロール（コントラクト）

UI パレットは、以下のロールを担います。意図をロールに対応させてから、そのロールを 16 進数カラーに対応させます。

ロール	内容
background	アプリ／ページの基本キャンバス
surface	カード、パネル、シート
surface-elevated	浮き上がったサーフェス（ポップオーバー、モーダル）。ダークモードでは明るいほど、より高く浮き上がります
border	区切り線、入力欄の枠線、フォーカスリング
text-primary	強調度の高い前景色
text-secondary	控えめなラベル、ヒント、キャプション
primary / primary-hover	ブランドのアクションカラーと、そのホバー状態
accent	primaryとは異なる、二次的な強調色
success / warning / error / info	セマンティックな状態（西洋の慣習では、緑／琥珀色／赤／青）

色付きの各ロールには、3 つの用途に対応するトライアドが必要です。 背景として使えるように作られた色が、自動的にテキストとして読みやすいとは限りません。また、表のように情報密度の高い場所では、塗りつぶし色はバッジの背景として強すぎます。

トークン	用途	Bootstrap 5.3 での名称	Material 3 での名称
{c}-fill + {c}-on-fill	ボタン、アクティブなチップ	--bs-{c} + color-contrast()	primary + on-primary
{c}-subtle + {c}-emphasis	バッジ／コールアウトの背景とラベル	--bs-{c}-bg-subtle + -text-emphasis	primary-container + on-primary-container
{c}-subtle-border	その背景の枠線	--bs-{c}-border-subtle	—
link	surface上のテキストに使うブランド色	（v6 では分割）	—

Carbon を除く 9 種すべての UI パレット用のトライアドは、palettes.md にあります。Carbon のトライアドは carbon.md にあります。ダークモードの塗りつぶし色は明るい色相なので、ラベルには白ではなく、パレット内で最も暗いニュートラルカラーを使います。

データ可視化用のパレットは、順序付けされた色のリストを提供します（カテゴリカル＝異なる系列、シーケンシャル＝低から高へのグラデーション、発散＝中立色を中点とする暖色から寒色への配色）。TUI スキームは、16 個の ANSI スロットと 4 つの特別なロールを提供します。

基本概念

• HSL ではなく OKLCH で設計します。 OKLCH は知覚的に均一です。HSL の「明度」は実際の見え方と一致しません（同じ L の青は、同じ L の黄色よりずっと暗く見えます）。そのため、HSL で段階を作っても、スケールが不均一になります。
• 調和： 配色（モノクロマティック／類似色／補色／トライアドなど）を選び、1 色だけを彩度と面積で際立たせ、残りの色は彩度を下げます。
• スケール： 10～12 段階にし、明度を均等に変化させます。中間域で彩度を最大にし、端に向かって下げることで、淡色が白っぽくならず、濃色が濁らないようにします。
• コントラスト： WCAG AA — 本文テキストは 4.5:1 以上、大きなテキストと UI／枠線は 3:1 以上です。
• ライトモードとダークモードは単純な反転ではなく、WCAG 2 のコントラスト比は黒に近い領域でコントラストを過大評価します。 どちらの失敗例と対処法も、以下の「注意点」で説明しています。しきい値と APCA の手順は references/contrast.md を参照してください。
• 色覚多様性への配慮： 意味は色相だけに頼らず、テキスト、アイコン、位置でも伝えます。男性の約 8% は色相だけでは区別できないためです。発散型データには、赤と緑ではなく、暖色と寒色（青／オレンジ、青緑／ローズ）を使います。

例

例：SaaS ダッシュボードの色を選ぶ

✅ 望ましい例

User: "I need colors for an admin dashboard, light and dark."
→ Recommend Carbon (deep slate-blue, dark-first, made for dense data UI) — the default;
  offer Graphite if hand-tuned light-mode parity matters more than the dashboard kit.
→ Copy its role→hex table from carbon.md (both modes).
→ Apply by role: background→surface→border→text, primary for the main CTA,
  success/warning/error for status badges. Confirm text-primary on background ≥ 4.5:1.

❌ アンチパターン

→ Pick four hues from a Coolors palette and assign them ad hoc: #2b2d42 nav, #8d99ae text,
  #edf2f4 background, #ef233c buttons. Dark mode = invert the hexes.

効果がある理由：ロールに対応付けたパレットなら、そのまま CSS 変数に取り込め、設計段階からアクセシビリティに配慮できます。場当たり的な配色には、ニュートラルカラーのスケールも、明度の異なるサーフェスも、ステータスカラーもありません。また、ライトパレットを反転すると、サーフェスが純粋な黒になり、ブランドカラーが白っぽくなります（「注意点：ライトモードとダークモードは単純な反転ではない」を参照）。

例：ステータスバッジの色

✅ 望ましい例

.badge-error { background: var(--error); color: #fff; }   /* role, not a hardcoded red */

❌ アンチパターン

.badge-error { background: #ff0000; color: #000; }   /* raw hue; #f00 on #000 ≈ 5.2:1 but glares,
                                                         and won't theme or switch to dark mode */

問題がある理由：色相をハードコードすると、テーマ設定やダークモードに対応できません。また、純粋な赤や純粋な黒はハレーションを引き起こします。

例：グラフのパレットを選ぶ

✅ 推奨

Categorical series (≤8) → Lunar Valley (default), or Okabe-Ito when CVD-safety is required.
Continuous low→high → Viridis (perceptually uniform, colorblind-safe).
Signed data with a midpoint → Console & Window (warm↔cool, neutral center).
Past ~8 categorical colors, series stop being distinguishable — aggregate into "Other" instead.

❌ アンチパターン

Twelve categorical series colored from the UI palette's success/warning/error/info roles plus
brand tints; profit/loss encoded green↔red with no labels.

効果がある理由：データの構造に合ったパレットの種類を選び、色の識別可能な限界を守っています。アンチパターンでは、UI のステータス用の役割を再利用して系列の識別と衝突させ、色相の上限である約 8 色を超え、色覚障害のある人向けにテキストやアイコンによる補助がないまま、赤と緑で情報を表しています。

注意点

• 症状： ブランドカラーを本文テキストに使うと読みにくくなります。原因： 彩度の高い中間色（アンバー、コーラル、ティール）は、それ自体の背景色に対して4.5:1を満たさないことがよくあります。塗りつぶし色とテキスト色は、同じ色階の別々の段階です。対処法： fillとlinkは別々の値にし、テキストの色を1段階ずつ濃くして基準を満たすようにします。このライブラリではEvergreen lightだけが異なります（#059669はボタンのラベルでは4.70:1ですが、白地のリンクでは3.77:1なので、linkには#00875bを使っています）。このように分ける必要があるからこそ、見落とされやすいのです。
• 症状： ステータスバッジの見た目は正しくても、テーブルのように要素が密集した画面では主張が強すぎます。原因： 白いテキストの背後に--errorのベタ塗りを使うのはボタンには適していますが、行単位のバッジには強すぎます。対処法： {c}-subtleの背景色と、それに対応する{c}-emphasisのラベルを使います。ステータスカラーをそのままラベルにも使うと、その淡い背景色では4.5:1を満たさないことが多いため、推測で選ばず、palettes.md（Carbonの場合はcarbon.md）から対応する値を選んでください。
• 症状： 12段階のスケールから生成したパレットでも、コントラストが基準を満たしません。原因： 段階の対応関係は、コントラストを保証するものではありません。Radixが保証するのはステップ11と12がステップ2に対して満たすコントラストだけで、それ以外は保証されません。ステップ9でボタンのラベルに必要な4.5:1を満たすことはまれで、ステップ8がコントロールの境界に必要な3:1に達することもまれです。対処法： 実際の背景に対して、この2つの値を調整します。ライトモードでは白いラベルを使うと決め、塗りつぶし色をより濃くします。スコアがすでに高い方のラベルに合わせて調整すると、薄い色合いで基準は満たせても、見た目が弱くなります。
• 症状： ライトモードでは適切に見えるパレットが、ダークモードではくすんで見えます。原因： ニュートラルカラーの色味を一度だけ決めて、そのまま引き継いでいます。明度が高いときに紙のように見える暖色系の色味も、明度が低いと茶色に見えます。対処法： モードごとにニュートラルカラーの色相と彩度を見直します。彩度が非常に低い場合、色相を寒色系に大きく振るのが一般的な解決策です。palettes.mdのDriftwoodではこの調整を行っています（色相はライトモードで64、ダークモードで224）。Meadowのセージではその必要がありませんでした。
• 症状： Color Hunt、Coolors、トレンド記事などからコピーしたパレットでは、インターフェースを構築できません。原因： ギャラリーのパレットは装飾的な色が4色あるだけで、ニュートラルカラーのスケールも、暗い文字色も、状態を表す色もありません。最も「いいね」の多いColor Huntのパレット30個のうち16個は、どの色の組み合わせでも本文テキストに必要な4.5:1を満たせません。対処法： 色相を種として使い、それをもとにスケールを作ります（build-your-own.md）。Dusk、Driftwood、Meadowもこの方法で作られました。
• 症状： セカンダリ／ミュートテキスト（「dimmed」、text-secondary）がデザインツールでは問題なく見えても、アプリではコントラストが基準を満たしません。原因： コンポーネントライブラリに付属するミュートテキストの既定色（Mantineのdimmedなど）は、コントラストではなく視覚的な階層に合わせて調整されており、一般に約3.4:1となるため、AAの基準値である4.5:1を大きく下回ります。対処法： ライブラリの既定値をそのまま使わず、contrast.mdを参照して独自のtext-secondaryの16進数カラーコードを選び、コントラストを確認します。また、テーマごとに再確認してください。同じ上書き設定でも、テーマによって基準を満たす場合と満たさない場合があります。フラットなキャンバスだけでなく、色味のある／浮き上がった面（カード、縞模様の行）でも再確認してください。
• 症状： ダークモードは「WCAGに合格」しているのに、読みにくくなります。原因： WCAG 2の計算では、黒に近い色でコントラストが実際より高く評価されます。対処法： 4.5:1の比率だけに頼らず、APCA（Lc）を使ってダークモードの色の組み合わせを再確認してください。
• 症状： ダークテーマが平坦に見え、要素の高さの違いが分かりにくくなります。原因： 背景に純粋な#000を使い、同じ明度の面を重ねています。対処法： ベースの色を約#0d1117～#1e1e2eまで明るくし、高さの段階ごとに色をより明るくします。
• 症状： 色覚特性のあるユーザーにはグラフが読めません。原因： 赤と緑の対比、または色相だけで意味を伝えています。対処法： 暖色系と寒色系を使った発散パレットに切り替え、ラベルやアイコンを追加します。カテゴリの区別にはOkabe-Itoの安全な色セットを使ってください（palettes.mdを参照）。
• 症状： パレットに適切なテキストカラーが定義されていても、グラフのテキストのコントラストが低いままです。原因： RechartsやMantine chartsなどのグラフライブラリは、軸／凡例／値のテキストを独自のインラインfillを使ったSVGとして描画するため、カラートークンがまったく適用されません。対処法： ライブラリのテキスト要素を直接指定します（例：.recharts-wrapper text { fill: var(--text) }）。CSSのカスケードはその要素に適用されません。
• 症状： 端末によってはTUIの色が表示されません。原因： 16進数カラーコードをハードコードしているか、重要なテキストにbright-black（スロット8）を使っています。対処法： 意味をANSIスロット1～6に割り当てて、ユーザー自身のテーマで表示できるようにし、スロット8は強調を弱める用途だけに使います。
• 症状： パレットの色の段階が不均一に見えます。原因： HSL／RGBで明度を段階的に変えています。対処法： OKLCHでスケールを作り直します。build-your-own.mdを参照してください。

統合

• frontend-design — コンポーネントとレイアウトを構築します。このスキルでは色を決定します。ここでパレットを選び、そちらで UI を実装します。
• typography — サイズ、ウェイト、行の高さを扱います。両者で共有するのはコントラストの最低基準のみです。テキストが読みにくい場合は、まず不具合の原因が色の組み合わせ（このスキル）なのか、サイズやウェイト（typography）なのかを判断します。
• dataviz — グラフの形式、軸、エンコーディングを扱います。カテゴリ別・シーケンシャル・発散型のパレットをここから選び、系列の色としてそのスキルに渡します。