UIのカラーパレットとして綺麗なグレーのグラデーションを考える

## この記事の概要

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

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

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

## HSL

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c3da453f-ee66-fa49-0b38-35eca700c3f7.png)

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

例えばAppleの[Human Interface GuidelinesにおけるColorsの説明](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/)を見ると、6段階あるグレーのうち最も明るいものは`#f2f2f7`でした。

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

## CIELAB

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9e2f6c40-1b65-c7a3-d89e-3a4d34070af7.png)

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

## ガンマ補正の逆をかける

https://qiita.com/yoya/items/122b93970c190068c752

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

> 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に当てはめてみると以下のようになりました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e25e0581-7e80-0dd9-d8b2-8d0b97be81a5.png)

明るい方のグレーは綺麗ですが、暗い側から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
```

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9bb1f045-4df9-fe13-664d-b46bdc6e1d84.png)

流石に違いましたね。


## 修正マンセル表色系の逆

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/34fd08a0-bfde-c898-ebc4-82273b0c1396.png)

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

## 悩み悩んでオリジナル

```
y = - 0.012x^12 + 1.09x
```

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/bab3d8d8-74c6-ceb2-d616-99b03af9cdac.png)

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

| 見かけ上の明るさ | 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ステップずつ増減させてみました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e5a9d4ac-b743-60e0-104a-0e4834cbd460.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c40fe6ee-794e-953b-830e-8aee80adfffd.png)

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

## 参考文献

- マクセルフロンティア株式会社 . “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でも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox