「gray dead zone」のない美しいCSSグラデーションを作る

• 黄色から青へ変化する線形グラデーションを作ると、中央に "gray dead zone" が生じる

→ CSS linear-gradient アルゴリズムは、RGB の数学的な平均を取ってピクセルの色の値を決定するため

→ RGB カラースペースでは、RGB 値がすべて同じなら常にグレースケールの色になる

• HSL (Hue / Saturation / Lightness) で平均を取るようにすると、gray dead zone は生じない

• しかし、単純に HSL でグラデーションを作ると、「人間の知覚を考慮していない」ため、明るすぎて Vivid に見える

→ 同じ明るさの色でも、黄色のほうがより明るく感じられる

• そのため、人間の視覚をもとにモデリングした HCL のようなモードを使うと、より良い場合がある

• 問題は、CSS ではまだ HSL/HCL のような色モードを指定する機能が提供されていないこと

→ CSS Gradient は 2 色に固定されていないため、10 個以上の複数色を指定する方法で解決できる

• あわせて公開されている Gradient Generator を使えば、LRGB/HSL/HSV/HCL などのカラーモードを利用した CSS グラデーションを生成して使える

[xguru]

HSL に関する内容は、以前投稿した記事にまとめてあります。

• HSLuv - 開発者フレンドリーな色空間 https://ja.news.hada.io/topic?id=1691