color-mix()関数をよく使うようになりつつある。ウェブ・アプリ・オア・ダイみたいな生息地なので、ネイティブ・アプリとの相互運用性に主眼を置いたデザイン・トークンが不要になり、思う存分CSSに寄せられる。カラー・パレットの管理もそうで、color-mix()関数はバリエーションを作る時に役に立つ。割合で混ぜるだけだが、仕様をしっかりと読んでおかないと思ってもみない結果になることがある。
color-mix()関数は、
- 指定した色空間で
- 2つの色を
- 指定した割合で
混ぜる、という関数だ。例えば、HSL色空間で、redとblueを、25%と75%ずつ混ぜてみる。redとblueは、共に彩度100%、輝度50%なので、色相だけが混ざる。以下、コード例でcolor-mix()関数を使って実行結果を表示しているが、フィード・リーダーなどでは見えないかもしれないため、別にテスト・ページも作っておいた。
.test1 {
background-color: color-mix(in hsl, red 25%, blue 75%);
}hsl(270deg 100% 50%)、つまりブドウ色になる。片方の色で割合を省略した場合、100%から引いた値に自動的に決まるので、以下のようにも書ける。
.test2 {
background-color: color-mix(in hsl, red 25%, blue);
}
.test3 {
background-color: color-mix(in hsl, red, blue 75%);
}どちらも同じくブドウ色だ。割合の合計が100%を超えると、100%になるように調整されるので、以下のようにも書ける。
.test4 {
background-color: color-mix(in hsl, red 30%, blue 90%);
}これも同じくブドウ色だ。ただし、どちらかで100%を超える割合を指定すると無効な値になるので、以下のようには書けない。
.test5 {
background-color: color-mix(in hsl, red 50%, blue 150%);
}無効な値になり、プロパティーは無視される。割合をcalc()関数で計算する場合に超えやすいが、安全のためmin()関数で括るという対処方法はある。問題は割合の合計が100%に満たない場合だ。以下のように書いてみると、わかりやすいだろう。
.test6 {
background-color: color-mix(in hsl, red 10%, blue 30%);
}かなり薄いブドウ色になってしまう。正確にはブドウ色の透過色になっていることが開発者ツールで確認できるだろう。合計が100%に満たない場合、その合計を不透明度として保持した上で、合計が100%になるように調整される。つまりこの場合は10% + 30% = 40%が不透明度になり、結果hsl(270deg 100% 50% / 40%)となるわけだ。
.test7 {
background-color: hsl(from color-mix(in hsl, red, blue 75%) h s l / 40%);
}不透明度もまとめて生成可能という6番目の書き方は役に立つ可能性があるが、不透明度自体は意識せざるを得ない。それならば、このように明示的に入れ子にした方がわかりやすいのではないかと思う。
color-mix()関数の書き方を総括すると、どちらかで割合を指定するだけで十分ということがわかる。むしろ片方は書かない方が、うっかり間違えないので無難だろう。また、2番目の色に割合を指定すると、「色Aに色Bをn%の割合で混ぜる」と解釈でき、読みやすいのではないかと思う。いずれにしても片方だけに書くという書き方に統一することが望ましいと考えている。
色の混ざり具合そのものは色空間の指定による影響が大きい。使い始めた当初はその事ばかりを意識していたが、すぐに割合の値でも大きな違いが表れることに気付く。同じような色を様々な形で作り出す修行が欠かせない。