color-mix()とは？CSSだけで色をブレンドできる最新カラー操作テクニック

こんにちは。静岡県浜松市でWEBデザイナーをしています小瀧です。
ボタンのホバー色やUIカラーを作るとき、こんな作業をしたことはありませんか。

ベースカラーを決める。
PhotoshopやFigmaで少し明るい色を作る。
CSSに書き直す。

または Sass を使って

「ベース色に白を20%混ぜる」
「少し暗くする」

といった処理を行うことも多かったと思います。

しかし最近のCSSでは、こうした色のブレンド処理をCSSだけで直接行えるようになりました。

それが color-mix() です。

2つの色をパーセンテージ指定で混ぜることができ、ボタンホバーやカラーパレット生成などを、CSSだけで柔軟に作れるようになります。
この記事では、color-mix()の基本から実務での使いどころまでを分かりやすく解説していきます。

color-mix()とは

color-mix()は、CSSで色を混ぜるための関数です。

2つの色を指定し、それぞれの割合を指定することで新しい色を生成できます。

これまで Sass やデザインツールで行っていた色の調整を、ブラウザ側で計算できるようになります。

基本の書き方

color-mix()の基本構文はこちらです。

color-mix(in srgb, red 70%, blue 30%);

意味は次の通りです。

この割合で色がブレンドされます。

ベース色を明るくする例

よくあるケースが、ベースカラーを少し明るくする処理です。

--primary: #2563eb; 
background: color-mix(in srgb, var(--primary) 80%, white);

これで

ベースカラーに白を20%混ぜた色

が生成されます。

Sassの lighten() のような処理を、CSSだけで実現できます。

ボタンホバーの実装例

実務ではボタンUIで非常に便利です。

button { background: #2563eb; color: white; } 
button:hover { background: color-mix(in srgb, #2563eb 80%, black); }

ホバー時に

「ベース色＋黒を少し混ぜる」

という自然な暗色変化を作れます。

カラーパレット生成にも便利

color-mix()は、デザインシステムにも向いています。

を自動生成できます。

--primary: #2563eb; 
--primary-light: color-mix(in srgb, var(--primary) 70%, white); 
--primary-dark: color-mix(in srgb, var(--primary) 80%, black);

カラーパレットをCSS変数だけで作れるのが大きなメリットです。

注意点

便利なcolor-mix()ですが、いくつかポイントがあります。

実務では、フォールバックカラーを用意しておくと安心です。

まとめ

color-mix()は、CSSでの色管理を大きく進化させる機能です。

デザインツールやSassに頼らなくても、ブラウザ側で柔軟な色計算ができるようになります。

ボタンホバー、カラーパレット生成、テーマカラー管理など、さまざまな場面で役立つでしょう。

CSSのカラー機能は今後さらに進化していきます。
今のうちにcolor-mix()を使いこなしておくと、モダンなUI設計がぐっと楽になります。

satokotadesignキャンペーン実施中！