CSS カラー形式

ブラウザは複数の CSS カラー構文を受け付けます。サポートマトリクスが許す形式を知ると、サイレントなフォールバックを防げます。

CSS の Hex

.brand {
  color: #2563eb;
  border-color: #2563eb80; /* モダンブラウザでの alpha 付き 8 桁 hex */
}

小文字 hex は一般的なスタイルガイドの選択です。ブラウザは #ABC と #abc を同じ扱いします。

関数 rgb() と hsl()

レガシーカンマ構文：

background: rgba(37, 99, 235, 0.12);

モダンスペース区切り構文（CSS Color Level 4）：

background: rgb(37 99 235 / 0.12);
color: hsl(221 83% 53%);

Autoprefixer や minifier が形式を正規化することがあります。デザインシステムリポジトリではソーストークンを一貫させてください。

名前付き色とキーワード

transparent、currentColor、長い名前付き色リスト（tomato、rebeccapurple）はプロトタイプで素早くコンパイルできます。本番テーマはドリフトを避けるためトークンを好み、ランダムな名前付き色は避けてください。

currentColor 継承

color: currentColor でアイコンとボーダーがテキスト色に従います。hex 値を重複せずに状態が変わるボタンに有用です。

モダンスペース：oklch と color-mix

新しい CSS は知覚的均一スペースをサポート：

--accent: oklch(58% 0.22 264);
--hover: color-mix(in oklch, var(--accent) 85%, black);

採用はブラウザターゲット次第です。フォールバックスタックは often sRGB hex を先に置き、ワイドガマットテーマは @supports ブロックで。

メールと PDF の制約

多くの HTML メールクライアントは hsl() と変数を除去します。Web アプリが内部で CSS 変数を使っていても、テンプレートにはインライン hex をエクスポートしてください。

要点

トークン向けに1 つの記述形式を選び、ビルド時にプラットフォーム別出力を生成し、hex のみフォールバックが必要なサーフェスを文書化してください。