Web デザインでは、2つの色を混ぜた中間色を作ることがよくあります。従来は、Sass のmix関数やJavaScript を使う必要がありましたが、CSS のcolor-mix()関数を使えば、CSS だけで簡単に色をブレンドすることができます。今回は、color-mix()の使い方や活用例について解説します。

color-mix() とは？

color-mix()は、CSS のcolor()関数の一部として提供されている機能で、2 つの色を指定した割合でブレンドすることができる関数です。

color-mix() の基本構文

color-mix(in 色空間, 色1 [割合1], 色2 [割合2]);
  • 色空間 : srgb, oklabなどの色空間を指定
  • 色1, 色2 : 混ぜ合わせる色を指定
  • 割合1, 割合2 : 混ぜ合わせる色の割合を指定（省略可）

例えば、赤と青を半々で混ぜた色を背景色に指定する場合は以下のように記述します。割合を両方とも省略した場合は、どちらも 50% の割合になります。

background: color-mix(in srgb, #F00, #00F); /* #800080 */
#800080

赤を 30%、青を 70% で混ぜた色を背景色に指定する場合は以下のように記述します。割合は、どちらか片方でも指定があれば、もう片方は省略しても構いません。

background: color-mix(in srgb, #F00 30%, #00F 70%); /* #4D00B3*/
/* もしくは */
background: color-mix(in srgb, #F00 30%, #00F); /* #4D00B3*/
/* もしくは */
background: color-mix(in srgb, #F00, #00F 70%); /* #4D00B3*/
#4D00B3

色空間について

色空間については、別の記事で解説しているので、そちらをご参照ください。

CSSのグラデーションやcolor-mix()の色空間指定による色の変化の違い

各色空間がグラデーションや混色にどのような影響を与えるのかを比較し、適切な色空間の選び方を解説します。

https://yutsuzo.com/web/css/css-gradients-and-color-mix-space-differences/

color-mix() の実用例

ホバーエフェクトに活用

ホバー時に元の色に白を混ぜてハイライト効果を生み出します。opacityを使用した場合と違い、下の要素が透けないため自然なハイライト効果を作れます。

a {
  background-color: #6F87D6;
  transition: background-color 0.3s;
}

a:hover {
  background-color: color-mix(in srgb, #6F87D6, white 25%);
}

See the Pen color-mix() Sample 01 by YUTSUZO (@YUTSUZO) on CodePen.

カラーバリエーションを作成

color-mix()を使って、サイトでよく使用する基準色を元に、明るめ・暗めの色を簡単に生成することができます。その際、CSS 変数を使って定義すれば、サイト全体で統一して使用できるため便利です。

:root {
  --color-primary: #6F87D6;
  --color-primary-light: color-mix(in srgb, var(--color-primary), white 25%);
  --color-primary-dark: color-mix(in srgb, var(--color-primary), black 25%);
}

.primary {
  background: var(--color-primary);
}

.primary-light {
  background: var(--color-primary-light);
}

.primary-dark {
  background: var(--color-primary-dark);
}

See the Pen Untitled by YUTSUZO (@YUTSUZO) on CodePen.

グラデーションと組み合わせる

異なる割合でブレンドした色を使用することで、柔らかい色合いのグラデーションを作成することができます。

background: linear-gradient(
  to right,
  color-mix(in srgb, color-mix(in srgb, red, white), color-mix(in srgb, blue, white) 30%),
  color-mix(in srgb, color-mix(in srgb, red, white), color-mix(in srgb, blue, white) 70%)
);

終わりに

color-mix()を使えば、CSSだけで色のブレンドが簡単にでき、より柔軟なデザインが可能になります。テーマカラーの調整、ホバーエフェクトの作成、グラデーションのカスタマイズなど、さまざまな用途で活用できるので、ぜひ試してみてください。

参考