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
- :
<color-interpolation-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