color-mix() function
color-mix() 関数記法は 2 つの <color> 値を採り、指定された色空間の指定された量で混合した結果を返します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 111 | 111 | 113 | 16.2 | 111 | 16.2 | |
基本構文
CSS
/* Basic blending (sRGB) */
.mixed {
color: color-mix(in srgb, #ff0000, #0000ff);
}
/* Specify percentage */
.light-brand {
background: color-mix(in oklch, var(--brand) 80%, white);
}
/* Adjusting transparency */
.faded {
color: color-mix(in srgb, var(--text-color) 60%, transparent);
}
/* Adjusting brightness on hover */
.button:hover {
background: color-mix(in oklch, var(--btn-bg) 85%, black);
}ライブデモ
実務での使いどころ
-
テーマカラーからの派生色生成
ブランドカラー1色から、hover 用の暗い色や disabled 用の薄い色を動的に生成できる。
-
透明度の代替手段
rgba() の代わりに color-mix で transparent と混合し、背景が透けない半透明色を作れる。
注意点
- 混合する色空間によって結果の色が異なる。oklch での混合が知覚的に最も自然な結果を生む。
- 割合の合計が 100% を超える場合は正規化されるが、意図しない結果になることがある。
アクセシビリティ
- 動的に生成された色のコントラスト比が十分であるか、代表的なパターンで検証すること。