color-mix()関数

2023.06.03

color-mix()は、2つのcolorの値を採り、指定された色空間の指定された量で混合した結果を返す関数である。
color-mix()関数は、長らく要望されていた機能（不透明な色の値を保持しながら透明度を追加する機能）も使用できる。たとえば、ブランドカラーを変数にし、異なる不透明度で色のバリエーションを作成することができる。ブランドカラーのブルーに10%の透明を混ぜると、90%の不透明なブランドカラーになる。このように、カラーシステムを素早く構築できることができる。

color-mix(色の表現方法, 組み合わせたい色1, 組み合わせたい色2)というように使用し、それぞれの色には配合させたい割合を指定する。
色の表現方法は、RGB 色モデルで表現される#ffffffやrgb(255, 255, 255)や HSL 色モデルで表現されるhsl(0, 0%, 100%)のようなもので、color-mix()ではcolorspaceと呼ばれ、srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, oklchの中から一つ指定する必要がある。

<ul>
  <li>10% #34c9eb</li>
  <li>40% #34c9eb</li>
  <li>70% #34c9eb</li>
</ul>
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);
}

【ブラウザ対応状況】
https://caniuse.com/mdn-css_types_color_color-mix
【参考】
https://zenn.dev/astrologian/articles/b49993d71433ea

inserted by FC2 system