hsl()からoklch()へ

感覚を慣れさせるため、このウェブサイトの色をoklch()関数に更新する。hsl()関数からの変換は色々な方法があるが、今だとブラウザーを使うと良いと思う。ただし環境によって変換結果が変わるので、。何度かやっているとなんとなく感覚が掴めてくるだろう。

.test {
  color: oklch(from hsl(48 48% 93%) l c h);
  /**
    Calculated Value:
    Firefox 137.0.2: oklch(0.960961 0.0184797 95.2514)
    Chrome 135.0.7049.96: oklch(0.960886 0.0184952 95.102)
    Safari TP 213: oklch(0.960961 0.01848 95.251404)
  */
}

適当な要素でこのように相対指定を利用すると、開発者ツールの計算済みではoklch()関数の絶対指定に変換される。相対指定はColor Module Level 5で定義されており、Firefox ESR 128にもギリギリ入ったので、かなり安全に利用できる。currentcolorなどでうまく動かないバージョンが残っていることは頭に入れて置きたい。

oklch関数の相対指定では、区切りにカンマが不要だ。最近頓に増えてきたCSS関数でのカンマの要不要を特徴付けていて、メンタル・モデルの更新に役立つだろう。例えばcolor-mix()関数ではカンマが必要だということを思い合わせると、理解しやすいかもしれない。