![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
CSS の color-mix() は、「メインカラーを基準に、少し薄い色・さらに薄い色を作る」といったカラー指定を、透過を使わずにスマートに実現できます。
CSS の color-mix() とは？
color-mix() は、2つの色を特定の割合で混ぜ合わせ、新しい色を生成する CSS 関数です。
|
1 |
color-mix(in 色空間, 色1 割合, 色2 割合); |
色空間（srgb など）と各色の割合（%）を指定することで、ブラウザ側で計算された混色結果がそのまま色として使用されます。
CSS変数と組み合わせることで、メインカラーを変更するだけで配色全体を調整できるのが大きなメリットです。
基本構文
|
1 |
color-mix(in 色空間, 色1 割合, 色2 割合); |
- 色空間
srgb（一般的・デフォルト）
hsl / lab / oklch なども指定可能 - 割合の指定
片方のみ指定した場合、残りは自動的に補完
両方省略すると 50% : 50%
実装例
白を混ぜて色を薄くする
メインカラーに白を80%混ぜて薄くする
|
1 2 3 |
.box.light { background: color-mix(in srgb, #66C7BC, white 80%); } |
See the Pen [CSS] color-mix() デモ｜白を混ぜて色を薄くする by mkl may (@mkl-may) on CodePen.
透明度を指定する
|
1 2 3 |
.box.alpha { background: color-mix(in srgb, #66C7BC, transparent 50%); } |
See the Pen [CSS] color-mix() デモ｜透明度を指定する by mkl may (@mkl-may) on CodePen.
CSS変数と組み合わせる
|
1 2 3 4 5 |
:root { -primary: #66C7BC; --primary-light: color-mix(in srgb, var(--primary), white 80%); --primary-lighter: color-mix(in srgb, var(--primary), white 90%); } |
See the Pen [CSS] color-mix() デモ｜CSS変数と組み合わせる by mkl may (@mkl-may) on CodePen.
このように定義しておくことで、基準カラーを変更するだけで薄い背景色も自動的に調整されます。
注意点（ブラウザ対応）
color-mix() は比較的新しい CSS 機能のため、一部の古いブラウザには対応していません。
最新の対応状況については、以下を確認してください。
https://caniuse.com/?search=color-mix
非対応ブラウザ向けフォールバック
color-mix() は便利な CSS 関数ですが、一部の古いブラウザでは対応していません。
特定バージョンへの対応が必要な場合は、フォールバックを用意します。
- 先に通常の背景色（不透明）を書く
- 対応ブラウザのみ color-mix() で上書きする
という順番で指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
:root { --primary: #66C7BC; --primary-light: #E0F4F2; } .box { background: var(--primary-light); } /* 対応ブラウザのみ */ @supports (background: color-mix(in srgb, red, white)) { .box { background: color-mix(in srgb, var(--primary), white 80%); } } |
See the Pen [CSS] color-mix() デモ｜フォールバックデモ by mkl may (@mkl-may) on CodePen.
この方法では、color-mix() に対応しているブラウザのみが混色指定を適用します。