この記事の概要

CSSでグラデーションを作ろうとして「RGBを同じ値だけ足していけば綺麗なグレーのグラデーションになるだろう」と思ったことはありませんか？
筆者も過去にやって「理屈の上ではあってるはずなのに……」と首をかしげていました。

今回は色々と試行錯誤し、一旦はそれらしいグラデーションを作ることができました。
知識として正しい記事なのか若干怪しいですが、将来のどなたかの参考になればと思い投稿します。

私自身この分野に詳しいわけではないので、より詳しい方がいたら是非コメントをお願いします

HSL

RGBの組み合わせだと人間が色味を想像しづらいということで色相(Hue)、彩度(Saturation)、輝度(Lightness)の組み合わせで表現したHSLというものがあります。

明るさを表すLの値を、100から0まで10刻みで用意しました。
背景には#fffと#000を敷いています。

黒背景では綺麗なグラデーションに見えますが、白背景だと1段階目のグレー（HEXで言うと#e6e6e6）がかなり暗い印象です。

例えばAppleのHuman Interface GuidelinesにおけるColorsの説明を見ると、6段階あるグレーのうち最も明るいものは#f2f2f7でした。

白背景時、もう少し良い見え方にできないか……と悩みます。

CIELAB

CIE L*a*b*は肉眼での見え方にかなり近いとのことだったので、試してみました。
Lの値を100から0まで10刻みで用意しました。

こちらもHSLのときの結果とほぼ同じです。

ガンマ補正の逆をかける

こちらの記事の中にある「デメリット」を読んでいたところ、以下の記載がありました。

100 と 0 の真ん中の輝度が欲しい時、そのまま計算すると50ですが、本当の輝度平均は 73 辺りです。50 の値で表示すると輝度が20%程になる事を示しています。
実際の輝度よりも相当暗くなります。

先ほどまで試した2つのグラデーションで、明るいはずのグレーがかなり暗く見えるのはこれが原因か？と思い試してみました。

本当は微妙に違いますが、sRGBの場合ガンマはほぼ2.2なので、Math.pow(x, 1/2.2)*100で先ほどまでと同様に11段階の結果を得ると……

0
35.111917342151315
48.11565050522864
57.85326090814171
65.93532905028938
72.9740052840723
79.27927305474223
85.03349277020303
90.35454309190943
95.32375475512687
100

この値をHSLのLに当てはめてみると以下のようになりました。

明るい方のグレーは綺麗ですが、暗い側から2番目のグレーが唐突過ぎます。

修正マンセル表色系

マンセルの式で表すとどうなるのでしょう。
最早理解の範疇を超えていますが、式としてはこうなっているようです。

(1.1914*V)-(0.22533*(V**2))+(0.23352*(V**3))-(0.020484*(V**4))+(0.00081939*(V**5))

0
1.17992539
3.04811648
6.3911777700000005
11.700751359999998
19.271843750000002
29.301152640000005
41.98539373
57.61962752000001
76.69558611000002
100.00000000000004

数値を見た瞬間に「これは違うだろ」と思いましたが、一応試してみます。

流石に違いましたね。

修正マンセル表色系の逆

ガンマの逆をかける、という発想から、特に根拠は無いですが試してみました。

思いつきでやったにしては白背景でのグラデーションは良い感じです。
しかし黒背景のとき、1つ目のグレーが急ですね。

悩み悩んでオリジナル

y = - 0.012x^12 + 1.09x

手作業でちまちまと確認しながら作った式なので、係数の導出に理論はありません。気合いです。

これまでと同様に11ステップの色が欲しいとしたら

なんとなく良さそうです。
数値的には以下です。

見かけ上の明るさ	HSLのLの値
0	0
10	11
20	22
30	33
40	44
50	55
60	65
70	76
80	87
90	96
100	100

2ステップずつ増減させてみました。

結構良いのではないでしょうか。
式が全然美しくないこと以外は問題なく使える気がします。

参考文献

マクセルフロンティア株式会社 . “HSLの色表現” . 画像認識の技術ブログ . 2021 . https://www.frontier.maxell.co.jp/blog/posts/32.html , (参照 2022-03-05)
Yoshihiro Yamazaki . “ガンマ補正のうんちく” . Qiita . 2021 . https://qiita.com/yoya/items/122b93970c190068c752 , (参照 2022-03-05)
［色彩工学/カラーサイエンス］YoshiColor . “色を科学する　その⑪ 均等色空間と色差＜中編＞「log」や「べき」で明るさを表す” . note . 2021 . https://note.com/yoshicolor/n/n812c204a0e62 , (参照 2022-03-06) .
一般財団法人日本色彩研究所 . “＜研究2部報＞マンセル明度関数の係数について” . 一般財団法人日本色彩研究所 . 2017 . https://www.jcri.jp/JCRI/hiroba/COLOR/buhou/166/166-4.htm , (参照 2022-03-06) .

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！