時折、明度と彩度を一定に保ったまま色相を変えていくつかの色を作りたいときがあります。
なすびのウェブサイトで例えると、制作事例のタグは頻繁な増減があり、数も多く、色自体に拘りたいわけではないので、すべての色をひとつずつ決めるのは結構な手間になります。
そのため、ここでは codePointAt() を使ってタグ名を数値に変換し、色相に当てはめてランダムではない動的な色を作ることにしました。
このような場合、これまではhsl()を使うことで簡単に明度彩度を固定したまま色相だけ違う色をたくさん作ることができましたが、hslによる指定では明度彩度を一定にしても視覚的な均一性はありませんでした（特に黄色系の色味が明るすぎるなど）。
最近のブラウザではhslに似た指定で視覚的均一性のあるカラー指定oklch()が使えるようになっています。
hslとoklchをわかりやすく並べて比較するとこのくらい違いがありました。
上下のどちらの色が均一に見えるでしょうか。
色相だけでなく、例えばデザインシステムのカラー設計で色相と明度（+彩度）を軸にしたカラーグリッドを作る場合でも、Oklchを使うことで視覚的に統一された色を簡単に作ることができます。
使用する上で注意点を挙げるとするならば、oklchはカラースペースがsRGBではなく、より広い範囲の色を指定することができることです。
極彩色に近い色だとディスプレイによっては色の差がわからないことがあるかもしれません。
とはいえ一般的なスマートフォンやMacbookのようなdisplay-p3対応を謳っているディスプレイであれば、ほぼ正確に出力できます。
参考にさせていただいたサイト
https://griponminds.jp/blog/relearn-css-color/