color-mix()

Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

color-mix() 関数記法は 2 つの <color> 値を採り、指定された色空間の指定された量で混合した結果を返します。

構文

css
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);

値

  • 関数記法: color-mix(method, color1[ p1], color2[ p2])
  • method
  • color1, color2
    • : 混合する <color> 値です。
  • p1, p2 省略可
    • : <percentage> 値で 0% から 100% までであり、混合する各色の量を指定します。これらは以下のように正規化されます。
      • p1 と p2 の両方が省略された場合は、 p1 = p2 = 50% となります。
      • p1 が省略されたら、 p1 = 100% - p2 となります。
      • p2 が省略されたら、 p2 = 100% - p1 となります。
      • p1 = p2 = 0% であれば、関数は無効になります。
      • p1 + p2 ≠ 100% であれば、 p1' = p1 / (p1 + p2) および p2' = p2 / (p1 + p2) となり、ここで p1' と p2' は正規化された値です。

形式文法

<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>? ]  

<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

例

2 つの色の混合

対応しているブラウザーでは、#34c9ebの混合率が高いほど、アイテムの青色が多くなり、白色が少なくなります。指定された値がない場合、パーセントの既定値は 50% です。

HTML

html
<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

css
li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, #34c9eb 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, #34c9eb 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, #34c9eb, white);
}

結果

color-mix() による色相の補間の使用

短い色相補間を用いる場合、得られる色相角は、カラーホイールを最短ルートで回ったときの入力角の中間になります。 より長い色相補間のメソッドを使用すると、カラーホイールの長いルートを取ったときの中点となる色相角が得られます。 詳しい情報は <hue-interpolation-method> を参照してください。

html
<div class="color-one">色 1</div>
<div class="color-two">色 2</div>
<div class="shorter">短い混色</div>
<div class="longer">長い混色</div>

CSS

css
.color-one {
  background-color: hsl(10 100% 50%);
}
.color-two {
  background-color: hsl(60 100% 50%);
}
.shorter {
  background-color: color-mix(
    in hsl shorter hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );
}
.longer {
  background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );
}

結果

仕様書

Specification
CSS Color Module Level 5
# color-mix

ブラウザーの互換性

BCD tables only load in the browser

関連情報