algorithmic-color-palette

アルゴリズムによるカラーパレットの生成

ブランドカラーが2〜3色あるだけでは、UIには不十分です。状態（ホバー、アクティブ、無効）用のシェード、背景やボーダー用のニュートラルカラー、ステータス用のセマンティックカラーが必要です。ブランドカラーからアルゴリズムでこれらを導き出すと、統一感のあるパレットになります。すべての色が汎用的なグレーや既製のカラ―ライブラリから持ってきたものではなく、ブランドと視覚的につながります。

シードカラーを推測しないでください。抽出しましょう（dembrandt engine、任意）。 ブランドがすでにウェブ上にある場合は、16進数を目測で決めるのではなく、公開サイトから実際のパレットを取得してください。get_color_palette（または extract-design スキル）は、DOM から実際に算出されたブランドカラーとニュートラルカラーを返します。その後、以下の方法で色を展開します。セットアップについては、extract-designを参照してください。

インタラクティブな状態色の導出

各ブランドカラーから、最低でも3つのバリエーションを生成します。ベース、暗め（ホバー／アクティブ）、明るめ（ティント／背景）です。

方法：HSL の調整

base:    hsl(H, S%, L%)
hover:   hsl(H, S%, L% - 8%)     ← darken by reducing lightness
active:  hsl(H, S%, L% - 14%)    ← darken further
tint:    hsl(H, S%, L% + 40%)    ← lighten significantly for backgrounds
subtle:  hsl(H, S% * 0.3, L% + 45%)  ← heavily desaturated, near-white

例：ブランドのプライマリカラー #133174（hsl 224, 70%, 27%）

--color-primary-subtle:  hsl(224, 21%, 94%);  /* background tint */
--color-primary-tint:    hsl(224, 70%, 67%);  /* light variant */
--color-primary:         hsl(224, 70%, 27%);  /* base */
--color-primary-hover:   hsl(224, 70%, 19%);  /* hover: -8% lightness */
--color-primary-active:  hsl(224, 70%, 13%);  /* active: -14% lightness */

例：ティール系ブランドカラーから導き出した成功を示す緑

ブランドカラーに緑またはティールがある場合は、より明確な成功を示す緑になるように色相を調整します。

--color-success-subtle:  hsl(142, 20%, 94%);
--color-success:         hsl(142, 60%, 35%);
--color-success-hover:   hsl(142, 60%, 27%);

ブランドカラーの色味を加えたグレーの導出

汎用的なグレー（#666、#999、#eee）は、ブランドとのつながりが感じられません。ブランドの色相の彩度を下げると、ブランドに応じてほのかに暖色、寒色、またはニュートラルな色味を帯びたグレーになり、同じパレットに属しているように感じられます。

目の快適さ：白地に純粋な黒を使わない

純粋な白 #FFFFFF に純粋な黒 #000000 を重ねると、ハレーションや眼精疲労の原因になります。テキストには #222222（grey-900）のような黒に近い色を、背景には #EEEEEE（grey-50）のようなオフホワイトを使います。この柔らかな組み合わせでも WCAG AA／AAA に準拠し、刺激の少ない見た目になります。

スウォッチだけでなく、役割を定義して公開する

16進数値を添えた名前付きチップも、それぞれの色に役割がなければ、システムとは言えません。サーフェス、サーフェスティント、テキスト、リンク、アクセント、装飾などの役割を定めましょう。カードの背面、ストライプ、細い罫線に使うオフホワイトのような、目立たない役割にも名前を付けます。名前のない役割はフレームワークのデフォルト値で埋められるため、ブランドに合わないニュートラルカラーがピクセルの大半を占めることになります。2つのチームが同じ未定義のティントに異なる値を付けたなら、不足しているのは色ではなく役割です。

方法：彩度を下げて明度を調整

brand hue H
grey-900: hsl(H, 12%, 10%)   ← near-black, text
grey-700: hsl(H, 10%, 30%)   ← dark text, icons
grey-500: hsl(H,  8%, 50%)   ← secondary text, placeholders
grey-300: hsl(H,  6%, 70%)   ← disabled text, subtle labels
grey-200: hsl(H,  5%, 82%)   ← borders, dividers
grey-100: hsl(H,  4%, 92%)   ← input backgrounds, table stripes
grey-50:  hsl(H,  3%, 96%)   ← page background, subtle fills

例：ブランドのプライマリカラー #133174（H = 224、青みがかった色）

--color-grey-900: hsl(224, 12%, 10%);  /* #16171f — slightly blue-black */
--color-grey-500: hsl(224,  8%, 50%);  /* #7b7e8a — cool grey */
--color-grey-200: hsl(224,  5%, 82%);  /* #cfd0d5 — cool light border */
--color-grey-50:  hsl(224,  3%, 96%);  /* #f4f4f6 — near-white with a hint of blue */

色相のない汎用的な #f5f5f5 と比べると、ブランドの色味を加えたバージョンはわずかに異なりますが、意図的に選ばれたように感じられます。

セマンティックカラーの導出

ステータスカラー（エラー、警告、成功、情報）は、ブランドと調和するようにします。統一感を出すには、彩度と明度を揃え、ステータスカラー全体に一貫した「視覚的な重み」を持たせます。

方法：視覚的な重みを揃える

1. 色相を選ぶ： 標準的なセマンティックカラーの色相を使います（エラーは0、警告は38、成功は142）。
2. S と L を揃える： ブランドのプライマリカラーの彩度と明度を基準にします。
3. 知覚される明るさに合わせて調整する： 黄色やオレンジ（警告）は、青や赤より明るく感じられます。ページ上で同程度の「重み」に感じられるよう、警告の明度を成功やエラーより5〜10％下げます。

セマンティックカラー	色相（H）	彩度（S）	明度（L）
エラー	0–10	プライマリに合わせる	プライマリに合わせる
警告	35–45	プライマリに合わせる	プライマリのL - 10%
成功	140–160	プライマリに合わせる	プライマリに合わせる
情報	210–230	プライマリに合わせる	プライマリに合わせる

「鮮やかさ」のルール： ブランドカラーの彩度が低い場合、セマンティックカラーも少し彩度を抑えます。ブランドカラーがネオンのように鮮やかな場合は、セマンティックカラーもそれに合わせます。強度を共有することで統一感が生まれます。

機能色とインタラクティブカラー

標準的なUI要素には、基本的なブランドカラーやセマンティックカラーに加えて、専用の機能トークンが必要です。

フォーカス状態

フォーカスインジケーターはアクセシビリティにとって重要です。すべての背景で見やすい色を使用してください。

• デフォルト： コントラストが十分に高い場合はブランドのプライマリカラーを使用します。
• フォールバック： 専用の高コントラストブルー hsl(215, 95%, 50%)。
• トークン： --color-focus。

選択とハイライト

テキスト選択とリスト項目のハイライトは、目立ちすぎず邪魔にならないようにします。

• 方法： プライマリカラーの色相を使い、明度を非常に高く（90% 以上）、彩度を中程度にします。
• トークン： --color-selection。

オーバーレイとモーダル

モーダルやドロワーの背景には、中立的で半透明の色が必要です。

• 方法： アルファチャンネルを使い、grey-900 の色相を使用します。
• トークン： --color-overlay: hsla(H, 12%, 10%, 0.5);

スケルトンと読み込み

読み込み中の状態は、中立的で控えめにします。

• 方法： ベースには grey-200、シマーのハイライトには grey-100 を使用します。
• トークン： --color-skeleton。

無効状態

無効化された要素は、操作できないことが伝わるようにする必要があります。

• 方法： テキストには grey-500、背景や境界線には grey-200 を使用します。
• ルール： 無効状態の背景にブランドの色合いを使うと「操作可能に見える」混乱を招くため、避けてください。

ブランド色を使ったシャドウ

高品質な UI では、純粋な黒のシャドウを避けます。ブランドカラーの非常に暗く、彩度を抑えた色相を使用してください。

• 方法： H がブランドの色相の場合は hsla(H, 15%, 5%, alpha) を使用します。
• トークン： --color-shadow-base。

リンク

• 基本： ブランドのプライマリカラー、または専用の高視認性ブルー。
• 訪問済み： プライマリカラーの色相を紫方向にずらし（+20）、彩度を下げます。
• トークン： --color-link、--color-link-visited。

入力と検証

• 方法： エラー状態と成功状態の境界線やテキストには、セマンティックな基本色を使用します。
• 非アクティブ時の境界線： grey-200。
• アクティブ／フォーカス時の境界線： ブランドのプライマリカラー。

トークンの完全な出力例

:root {
  /* Primary — derived from brand #133174 */
  --color-primary-subtle:  hsl(224, 21%, 94%);
  --color-primary-tint:    hsl(224, 70%, 67%);
  --color-primary:         hsl(224, 70%, 27%);
  --color-primary-hover:   hsl(224, 70%, 19%);
  --color-primary-active:  hsl(224, 70%, 13%);

  /* Brand-tinted neutrals */
  --color-grey-900: hsl(224, 12%, 10%);
  --color-grey-700: hsl(224, 10%, 30%);
  --color-grey-500: hsl(224,  8%, 50%);
  --color-grey-300: hsl(224,  6%, 70%);
  --color-grey-200: hsl(224,  5%, 82%);
  --color-grey-100: hsl(224,  4%, 92%);
  --color-grey-50:  hsl(224,  3%, 96%);

  /* Semantic */
  --color-error:   hsl(4,  72%, 44%);
  --color-warning: hsl(38, 80%, 44%);
  --color-success: hsl(142, 58%, 35%);
  --color-info:    hsl(224, 70%, 27%); /* = primary */

  /* Semantic subtle backgrounds */
  --color-error-subtle:   hsl(4,  50%, 95%);
  --color-warning-subtle: hsl(38, 60%, 95%);
  --color-success-subtle: hsl(142, 40%, 95%);

  /* Functional */
  --color-focus:     var(--color-primary);
  --color-selection: hsl(224, 70%, 90%);
  --color-overlay:   hsla(224, 12%, 10%, 0.5);
  --color-skeleton:  var(--color-grey-200);
  --color-shadow:    hsla(224, 15%, 5%, 0.1);

  /* Links */
  --color-link:         var(--color-primary);
  --color-link-visited: hsl(244, 40%, 35%);
}

レビューチェックリスト

• ホバー色とアクティブ色は個別に選ぶのではなく、明度を調整してベースカラーから導出していますか？
• ニュートラルグレーには汎用的な #666／#eee ではなく、ブランドの色相を加えていますか？
• グレースケールでは、明度が上がるにつれて彩度を段階的に下げていますか？
• 純粋な黒（#000000）と純粋な白（#FFFFFF）の組み合わせを避け、代わりに黒に近い色（例：#222）とオフホワイト（例：#EEE）を使用していますか？
• ステータスカラー（成功、警告、エラー）の視覚的な重みは、ブランドのプライマリカラーに合っていますか？
• ブランドのプライマリカラーがオレンジまたはアンバーの場合、警告色はそれと明確に区別されていますか？
• 各ブランドカラーには、最低限、控えめ、ベース、ホバー、アクティブの各バリエーションがありますか？
• オフホワイトのカード色や細い境界線も含め、すべての色に役割（サーフェス、テキスト、リンク、アクセント）が割り当てられていますか？
• 統一感のある視覚的な重みを生み出すため、セマンティックカラーの彩度と明度は揃っていますか？
• アクセシビリティのコントラスト要件を満たす専用の --color-focus トークンがありますか？
• 選択、オーバーレイ、シャドウの色は、汎用的な黒やグレーではなく、ブランドの色相から導出されていますか？
• 操作可能なブランドカラーとの混同を避けるため、無効状態は中立色（グレー）になっていますか？
• リンクの色には、アルゴリズムで導出した明確な visited 状態がありますか？

よくあるアンチパターン

アンチパターン	問題	対処方法
純粋な白に純粋な黒	視覚的な負担が大きく、「光暈効果」が生じます	黒に近い色（#222）とオフホワイト（#EEE）を使用します
鮮やかな色の隣にグレーの境界線	安っぽく、まとまりがない印象になります	境界線を取り除くか、隣接する色に色合いを加えた暗めの色を使用します
「警告／エラー」色をランダムに選ぶ	パレットに統一感がなくなります	視覚的な重みを揃えながら、ブランドの HSL から導出します
汎用グレーパレット（#666、#999）	ブランドらしさがありません	彩度を抑えたブランド色相でニュートラルカラーに色合いを加えます