灰色を混ぜて彩度を下げる

ミュートされたバリアントを作る

時には、暗くも明るくもないバージョンが欲しい — 同じ色相を保ちつつ、 より静かで洗練された印象の ミュート バリアントが欲しいことがあります：

:root {
  --brand: #2563eb;
  --neutral: #71717a; /* zinc-500、おおよそ L 0.55 */
}

.muted-30 { background: color-mix(in oklch, var(--brand), var(--neutral) 30%); }
.muted-60 { background: color-mix(in oklch, var(--brand), var(--neutral) 60%); }

知覚的に中明度の中性色 (L 0.55 付近) と混ぜると、結果の全体的な明度を 保ちつつ彩度を下げられます。色相系列は「青」と認識できるまま、視覚的な 「うるささ」だけが落ちます。

単純に彩度を下げてはダメ？

CSS には任意の色に対する独立した「彩度ノブ」がありません。color-mix 登場前の最善は、HSL に変換して S 値を下げ、戻すという 3 段階のロッシー ラウンドトリップでした。color-mix() は CSS 1 行でこれを行い、しかも OKLCH に留まれます。

灰色の選び方

中性色の明度が重要です。中性色がブランド色より大幅に暗ければ結果も 暗くなり、明度が一致していれば純粋に彩度が下がります。マッチする灰色を 見つける手早い方法は、カラーコンバーター で ブランドの OKLCH L を読み、oklch(L 0 0) を構築することです。