CSSの色の設定にはcolor-mix()を活用しよう

こんにちは、ナカムラです。
今回はCSSの色の指定について書きたいと思います。
CSSのcolor-mix()という関数を使ってみようと思います。

color-mix()とは

簡単にいうと2色を混合させる関数です。

MDNからの引用

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

developer.mozilla.org

color-mix(色空間（method）, 1色目, 2色目)
第一引数に色空間（method）を、
第二引数に１色目、続いて第三引数の2色目を書きます。

色空間（method）は値間の補間に使用する色空間の種類になります。
詳しくは下記で説明されていますが、よく使うのはsrgbではないかと思いますので、DEMOもsrgbを使用します。 developer.mozilla.org

DEMO

See the Pen color-mix()を活用する by Nakamura (@takayo-nakamura) on CodePen.

最初にカラーパレットの方から見ていきましょう。

青と白を混ぜたものです。
background-color: color-mix(in sRGB,var(--blue) 25%,white);
白は混合する量を省略しているので、青25%、白は75%（100% - 25%）の混合になります。

白と合わせるとrgbでの透過のように見えますが、比較すると若干色が違うのがわかるかと思います。

color-mix()の混合で表示された色のカラーコード：#C6D6E6
rgb()の透過で表示された色のカラーコード：#BCCCDC

透過でなければ背景色に影響されないので「ボタンのhover時に色を薄くする」という時にも色の統一が可能になります。
2色の組み合わせなので青と赤でもできますし、混合する割合を変えることもできます。

color-mix()を活用する

単純に色だけなら関数を使わなくても良い場合も多いので必要ない時には無理に使わなくても良いと思いますが、色違いのボタンなどに良いと思います。

1色目をそれぞれの色の変数を入れ、白の割合を変化させます。
hover字のスタイルは白の割合の変数の値を変えるだけです。
各色ごとにhoverを設定しなくても良くなりますので、シンプルで読みやすいです。

button {
　/* 〜省略〜 */
  
  &:hover {
    --button-bg-lighten: 20%;
    cursor: pointer;
  }
  
  &.blue {
      background-color: color-mix(in sRGB,var(--blue),white var(--button-bg-lighten));
  }
  
  &.orange {
      background-color: color-mix(in sRGB,var(--orange),white var(--button-bg-lighten));
  }
  
  &.red {
      background-color: color-mix(in sRGB,var(--red),white var(--button-bg-lighten));
  }
}

まとめ

CSS変数との組み合わせで効率の良い書き方ができるようになってきました。
SASSなどのプリプロセッサをやめようかと検討しているところなので、CSSの書き方も色々と考えていきたいと思います。