CSS color-mix() 完全ガイド — 色空間と混合率の使い方
CSS color-mix()はCSS Color Level 5で定義された関数で、2つの色を指定した色空間で混合します。JavaScriptを使わずにCSSだけでグラデーションの中間色計算やテーマカラーのバリエーション生成が可能になります。
color-mix()の基本構文
color-mix(in colorspace, color1 percentage, color2)の形式で書きます。in srgbはsRGB色空間での混合を意味し、最もシンプルです。percentageを省略すると50%（均等混合）になります。color1とcolor2にはhex・rgb()・hsl()・named colorなど任意のCSS色値が使えます。Chrome 111、Firefox 113、Safari 16.2以降でサポートされています。
色空間による混合結果の違い
同じ2色でも色空間によって混合結果が大きく変わります。srgbは最も一般的でPhotoshopのレイヤー合成に近い結果になります。hslは人間の知覚に近く、中間色が自然に見えます。oklchとoklabはCSSが推奨する知覚均一色空間で、どの色の組み合わせでも均一に明るい中間色が得られます。lchはoklchの非線形版で、特定の色域で明るすぎる中間色が出ることがあります。
デザインシステムでの活用
color-mix()はCSS変数（カスタムプロパティ）と組み合わせると強力です。--color-primary: #0066cc; --color-primary-light: color-mix(in srgb, var(--color-primary) 30%, white);のように書けば、JavaScriptなしでブランドカラーのバリエーションを自動生成できます。ダークモードへの対応もprefers-color-schemeと組み合わせてCSSだけで実装できます。
color-mix()の注意点とフォールバック
color-mix()はCSS Color Level 5の比較的新しい機能です。@supportsを使ってサポート状況を確認し、未対応ブラウザ向けにフォールバックを用意することが重要です。また、色空間によってはhdr（高ダイナミックレンジ）の値が生成される場合があり、sRGBの範囲を超える色がクリップされることがあります。本番利用前に主要ブラウザで確認してください。