color-mix()
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
color-mix()
関数記法は 2 つのcolor
の値を採り、指定された色空間の指定された量で混合した結果を返します。
構文
color-mix(in lch, peru 40%, lightgoldenrod);
color-mix(in srgb, #34c9eb 20%, white);
値
- 関数記法:
color-mix( in <colorspace> , [ <color> && <percentage>? ]#{2})
-
<colorspace>
はsrgb
,srgb-linear
,lab
,oklab
,xyz
,xyz-d50
,xyz-d65
,hsl
,hwb
,lch
,oklch
のいずれかです。既定値はありません。<color>
は有効なcolor
です。<percentage>
は混合する色のパーセント値です。
例
HTML
<ul>
<li>10% #34c9eb</li>
<li>40% #34c9eb</li>
<li>70% #34c9eb</li>
</ul>
CSS
li:nth-child(1) {
background-color: color-mix(in srgb, #34c9eb 10%, white);
}
li:nth-child(2) {
background-color: color-mix(in srgb, #34c9eb 40%, white);
}
li:nth-child(3) {
background-color: color-mix(in srgb, #34c9eb 70%, white);
}
結果
対応しているブラウザーでは、 #34c9eb
の混合率が高いほど、 3 つのアイテムがより青くなります。
仕様書
Specification |
---|
CSS Color Module Level 5 # color-mix |
ブラウザーの互換性
BCD tables only load in the browser