CSS Reference

color-mix()

色をミックスする

color-mix() 関数は、指定された2つの色を、同じく指定した色補間に使用する色空間と分量に基づいてミックスします。

color-mix() 関数の基本的な構文は下記のようになります。

color-mix(
  <color-interpolation-method>,
  [ <color> && <percentage [0,100]>? ]#{2}
)

<color-interpolation-method>

色補間に使用する色空間を指定します。基本的な構文は下記の通りです。

in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

下記に説明するいずれかの値をひとつ、in に続けて指定します。

<rectangular-color-space>

srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、lab、oklab、xyz、xyz-d50、xyz-d65 のいずれかの値になります。

<polar-color-space>

hsl、hwb、lch、oklch のいずれかの値になります。

<hue-interpolation-method>

色相補間のアルゴリズム。shorter、longer、increasing、decreasing のいずれか、もしくはこれらのいずれかと、hue を空白文字で区切って同時に指定した値のいずれかになります。

省略も可能で、省略された場合、既定値は shorter hue となります。

<custom-color-space>

@color-profile 規則で定義したカラープロファイルの名前を指定します。

ミックスする色の指定

<color> <percentage [0,100]> の記述を2つ記述します。ここで指定した色が、先に指定した <color-interpolation-method> に基づいてミックスされます。

<color> は色の指定です。<color> データ型の値であれば指定できます。

<percentage [0,100]> は、0 ～ 100 までのパーセンテージ値です。パーセンテージ値は省略することも可能で、もし2つの色ともにパーセンテージ値が省力された場合は、各色を 50% / 50% でミックスします。片方が省略された場合は、100% から指定されたパーセンテージ値を引いたものが、もう片方のパーセンテージとなります。

例えば下記のような指定になります。

/* 下記の3つの指定はすべて同じ意味になる */
color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)
color-mix(in lch, purple, plum)

color-mix()のサンプルソース

color-mix(in lch, white, black);
color-mix(in xyz, white, black);
color-mix(in srgb, white, black);
color-mix(in xyz, rgb(82.02% 30.21% 35.02%) 75.23%, rgb(5.64% 55.94% 85.31%));

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome