color-mix()の使い方 — 2色を割合で混ぜて色を作る
デザインシステムでカラーパレットを動的に作る
デザインシステムでメインカラーの様々なバリエーション（hover状態、disabled状態など）を作る際、各色値を手動で指定するのは煩雑です。color-mix(in srgb, color1, color2 percentage)を使えば、2つの色を任意の比率で混合した新しい色をCSSで直接生成できます。
CSSカスタムプロパティと組み合わせれば、1つのブランドカラーから色システム全体を動的に派生させることができます。
適用方法
1
color-mix(in srgb, color1, color2 percentage)の形式で記述する
2
CSSカスタムプロパティに基本色を定義する
3
hover、active、disabled状態別の色をcolor-mixで派生する
4
様々な色空間（srgb、oklchなど）を実験して最適な混合結果を見つける
メリット
- ✓ 1つの基本色から様々なバリエーションを動的に生成できる
- ✓ opacityと異なり背景との混合なしで正確な色を得られる
デメリット
- ✗ 混合結果が色空間により異なり予測が難しい場合がある
- ✗ デザインツール（Figmaなど）の色と正確に一致しない場合がある
ユースケース
ブランドカラー1つでUI全体のカラーパレットを自動生成
透明度の代わりにcolor-mixで背景色との自然なブレンディング実装