カラーシステム

概要

WebアプリUI、マーケティング／ランディングページ、データ可視化、ターミナル／TUI の4ドメイン向けに厳選された、すぐに使えるカラーパレット（ライト＋ダーク）のライブラリです。新しいパレットを構築し、そのアクセシビリティを検証するための方法論も含まれています。

基本原則: 生の色相ではなく、セマンティックロール（背景、テキスト、プライマリ、エラー…）に基づいて色を選択します。ここにあるすべてのパレットは、16進数カラーコードをロールにマッピングしているため、テーマは交換可能で、一貫性があり、アクセシブルです。まずロールを選び、次にその16進数コードを読み取ってください。ロールが属する場所に16進数コードをハードコードすることは、後でテーマを壊す原因になります。

読み込むファイル	使用する状況
references/carbon.md	Carbonを使う必要があるページやアーティファクトを構築する場合 — このファイルのみを読んでください。Carbonのロール、ダッシュボードキット、両モードのトライアドが含まれています
references/palettes.md	他のパレットの16進数値が必要な場合 — 4ドメイン、ライト＋ダーク。fill/subtle/emphasisトライアド。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 — クールなスレート上の深いティール、単一の暖色アクセント。テクニカルレポート、SRE／レート制限ダッシュボード。数字のための等幅フォントと組み合わせて使用。

12段階のOKLCHスケールから生成され、ロールと共に提供されるため、拡張や再派生が可能です：

Dusk — インディゴプライマリ、ターコイズアクセント、ほぼニュートラルなクールグレー。フォーカスツール、エディタ、長時間使用アプリ。
Driftwood — 温かい砂ニュートラル上の深いマリンプライマリ、クレイアクセント。ダークモードでニュートラルをクールに振るもの。
Meadow — くすんだセージプライマリ、ゴールドアクセント、温かい骨ニュートラル。セットの中で最もソフト。自信というよりは安らぎ。

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

Sunbloom — 洗練されたコーラル／アンバーの暖かさ。親しみやすい消費者／クリエイターブランド。
Tidewater — ティール／セージ。フィンテック、ウェルネス、B2Bの信頼。
Obsidian & Gold — ほぼ黒＋メタリックゴールド。プレミアム、高級、エージェンシー。
Paper & Ink — 温かい紙＋インクブラック＋1つのテラコッタアクセント。ブログ、長文、ポートフォリオ。

データ可視化 — 色覚多様性対応、暖色／寒色アーシー

カテゴリカル: Lunar Valley ⭐ (デフォルト) · Hearthstead · Vintage Warm · Glass Wall · Okabe-Ito (CVD安全性が必須の場合に使用)
シーケンシャル: Viridis ⭐ (デフォルト) · Magma · Inferno · Plasma · ColorBrewer Blues · YlOrRd (すべて知覚的一様)
発散: Console & Window ⭐ (デフォルト) · Alien Sun · Orchard Dusk · Coffee & Coolant — すべて暖色↔寒色、赤↔緑なし

ターミナル／TUI — 16-ANSI ＋ bg/fg/cursor/selection

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`	二次強調、プライマリとは異なる
`success` / `warning` / `error` / `info`	セマンティック状態（西洋の慣習により緑／琥珀／赤／青）

各色付きロールにはトライアドが必要です。1つの16進数では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で分割)	—

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ダッシュボードの色を選択する

✅ 適切な方法

ユーザー: 「管理ダッシュボード用の色が必要です。ライトとダークで。」
→ Carbon（濃いスレートブルー、ダークファースト、高密度データUI向け）を推奨 — デフォルト。
  ダッシュボードキットよりも手動調整されたライトモードパリティが重要な場合はGraphiteを提案。
→ carbon.md（両モード）からロール→16進数テーブルをコピー。
→ ロールで適用：background→surface→border→text-primary、メインCTAにはprimary、
  ステータスバッジにはsuccess/warning/error。background上のtext-primaryが≧4.5:1であることを確認。

❌ アンチパターン

→ Coolorsパレットから4つの色相を選び、アドホックに割り当てる：#2b2d42をナビゲーション、#8d99aeをテキスト、
  #edf2f4を背景、#ef233cをボタン。ダークモード＝16進数を反転。

なぜ適切な方法が機能するか：ロールマップされたパレットはCSS変数に直接落とし込まれ、設計上アクセシブルになります。アドホックバージョンにはニュートラルランプ、浮き上がり階層、ステータス色がなく、ライトパレットを反転すると純黒のサーフェスと洗い流されたブランド色が生成されます（落とし穴：ライト対ダークは反転ではありませんを参照）。

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

✅ 適切な方法

.badge-error { background: var(--error); color: #fff; }   /* ロール、ハードコードされた赤ではない */

❌ アンチパターン

.badge-error { background: #ff0000; color: #000; }   /* 生の色相。##f00 on ##000 ≈ 5.2:1だがまぶしい、
                                                         テーマやダークモードに切り替えられない */

なぜ失敗するか：色相をハードコードするとテーマとダークモードが壊れ、純赤／純黒はハレーションを引き起こします。

例：チャートパレットを選ぶ

✅ 適切な方法

カテゴリカル系列（≤8）→ Lunar Valley（デフォルト）、またはCVD安全性が必要な場合はOkabe-Ito。
連続低→高 → Viridis（知覚的一様、色覚多様性対応）。
中間点を持つ符号付きデータ → Console & Window（暖色↔寒色、ニュートラル中心）。
約8色を超えるカテゴリカル色では系列を区別できなくなる — 代わりに「その他」に集約。

❌ アンチパターン

UIパレットのsuccess/warning/error/infoロールとブランド色合いから12のカテゴリカル系列に色を付け、
利益／損失を緑↔赤でラベルなしでエンコード。

なぜ適切な方法が機能するか：データの構造を正しいパレットファミリに一致させ、識別可能性の限界を尊重します。アンチパターンは系列の識別子と衝突する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はこのように作られた。
症状: セカンダリ／くすんだテキスト（「薄暗い」、text-secondary）はデザインツールでは問題なく見えるが、アプリでコントラストに失敗する。原因: コンポーネントライブラリは、視覚的階層（コントラストではない）に調整されたデフォルトのくすんだテキスト色（例：Mantineの dimmed）を出荷する。一般的に約3.4:1に着地し、4.5:1のAAフロアをはるかに下回る。修正: 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進数、または負荷の高いテキストがブライトブラック（スロット8）に配置されている。修正: 意味をANSIスロット1～6にバインドし、ユーザーのテーマがそれをレンダリングできるようにし、スロット8は強調解除のみに使用する。
症状: パレットのステップがでこぼこ／不均等に見える。原因: HSL/RGBで明度をステップしている。修正: OKLCHでスケールを構築する。build-your-own.mdを参照。
症状: ダークモードのバッジに白ではなく暗いテキストが使用されている。原因: ライトモードのバッジは暗いラベルを取る。ダークモードでは、fill は明るいので、そのラベルはパレットの最も暗いニュートラルであるべきであり、白ではない。修正: ライトモードとダークモードで独立してトライアドを確認する。暗いフィルに対する白いラベルは正しいが、明るいフィルに対する暗いラベルも正しい。
症状: ダークモードのバッジの on-fill ラベルのコントラストが低すぎる。原因: バッジ（subtle + emphasis）は fill トライアドではなく subtle トライアドを使用する。fill トライアドは通常高いコントラストのペアを必要とする（暗いフィル＋白いラベル）が、subtle トライアドは弱い。ダークモードの subtle 背景が明るい場合、その emphasis ラベルはパレットの最も暗いニュートラル（多くの場合 ~#e0e0e0 と >5:1）でなければならず、白色（>#f0f0f0）ではない。修正: ダークモードでは、-subtle 背景に対して -emphasis ラベルとして白を使用しない。代わりにpalettes.md（Carbonはcarbon.md）の正しいペアを使用する。

さらに詳細なガイダンスについては、references/theory.md（ハーモニーについて）、references/contrast.md（検証について）、references/build-your-own.md（生成について）を参照してください。

カラーデザインシステム