[CSS] グラデーションを綺麗に見せる"oklch"を深く知る

CSSのグラデーションがなんだか気持ち悪いぐらいに汚いと思ったことありますか？ せっかくホームページで表示するのであれば、できるだけ綺麗に見せたいと思うのが、 ホームページ制作、デザイン、コーディングを担当した人の思うこと。 綺麗に見せるポイントは、oklch機能を使えばいいだけなんですが、 これ最近まで知らなかったので、同じようにグラデーションクオリティに悩んでいる人のために、 この機能の使い方と、なんで綺麗にみえないグラデーションがあるのかということを深掘ってみたいと思います。

CSSの書き方で変わるグラデーションの不思議

多くの人が rgb() や hex を使ってグラデーションを指定しているが、実はこれが“汚いグラデ”の原因なんですよね。 rgb は直線的に色を混ぜるため、人間の視覚で見たときに違和感が出やすいって知ってました？自分は知りませんでしたwww。 明るい色から暗い色へのグラデーションで「途中がにごる」「不自然に灰色っぽい」などの現象が起きやすいんです。 これは、人の目が線形の色の変化を非線形に感じることに起因するっていう説明をネットで見かけるが、 グラデーションの計算で、RGBは白黒の境目を通る時に切り替わりが発生するんだけど、 LCH（Lightness, Chroma, Hue）系の色空間で混ぜると、人の視覚により自然なグラデーションになる。 中でも OKLCH は、LCH をベースにした新しいカラー空間で、Webで使えるようになってきているらしい。（知らんけど）

oklchの書き方

OKLCHはCSSで color: oklch(0.7 0.15 220); のように記述する。 値の意味は順に「明度 (Lightness)」「彩度 (Chroma)」「色相 (Hue)」。 グラデーションに使うときは、2つの oklch() を linear-gradient でつなげるだけ。 例： background: linear-gradient( 90deg, oklch(0.8 0.2 40), oklch(0.8 0.2 120) ); このように書くと、明度や彩度を揃えたまま色相だけを変化させた綺麗なグラデーションが作れるんだってよ。 ちなみに、

あとがき

グラデーションはちょっとした工夫で“あか抜けた印象”を作れると言う話、いかがでした？ 色を選ぶときは見た目の「心地よさ」を重視したほうが、結果的にデザインの質が上がると思いません？ OKLCHはまだ新しいが、今後のCSSの主流になるポテンシャルがあると思うんだよね。 ブラウザ対応が広がる前に慣れておくと、デザインに差をつけられるハズ。 「グラデがなんかダサい」と思ったら、ぜひ一度 oklch() を試してみましょう。