color-mix()
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
color-mix()
関数記法は 2 つのcolor
の値を採り、指定された色空間の指定された量で混合した結果を返します。
構文
css
color-mix(in lch, peru 40%, lightgoldenrod);
color-mix(in srgb, #34c9eb 20%, white);
値
例
HTML
html
<ul>
<li>10% #34c9eb</li>
<li>40% #34c9eb</li>
<li>70% #34c9eb</li>
</ul>
CSS
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