kanta's spike

デジタル庁が公開しているデザインシステムは、 ウェブデザインのポリシーや部品が記載されていて、大変勉強になります。

その中のカラーシステム2.0の説明を読んでいると、カラーパレットが登場します。 カラーパレットには、名前(例: Blue)と、番号(例: 50,100,…,1200)、16進数のRGB色(例: #E8F1FE) が登場します。

このようなカラーパレットを自分でも作ってみたくなりました。

やること

基準となる色を選び、その色のカラーパレットを作成します。

今回は例として、最近見たアニメからこの色を選びました。 この色をもとにカラーパレットを作成したいと思います。

試行錯誤1

最初は、RGBをHSLに変換して輝度(HSLのL)だけ変化させれば良いと考えました。

デジ庁のカラーシステムでは、パレットに13段階(50,100,200,300,400,500,600,700,800,900,1000,1100,1200)の番号がついています。

13段階のルールがわからないので、今回は簡単にするため、輝度(L)をそのまま 色の番号 (プレフィックスにL、あとは輝度から%の除いた値)にしたいと思います。

80〜20までの輝度を10区切りで、100〜80、20〜0は5区切りで並べてみました。

なかなか良さそうです。

しかし、以下の記事で知ったのですが、HSLによる色の表現は人間の感覚とは少し違うそうです。 同じ輝度を持つ色同士(例えば、青と黄)を並べた時に、それらの色を人間の目で見ると、同じ明さと感じれないそうです。

比較用に黄色のパレットも作ってみました。

マントの緑と黄色を輝度(L)の順に並べてみましょう。

例えばL50番など同じ輝度の緑と黄色を比べても、同じ輝度とは感じられませんね。 また、個人の感想ですが黄色のL60番とL50番の色の差がわかりにくいですね。

試行錯誤2

先ほどの記事(リンクを再掲)では、CIE L*C*h カラーモデルという色の表現方法を紹介してくれています。

このカラーモデルは、人間の知覚に合せて設計されているそうです。Lが明度で、Cが彩度、H色相になります。

さきほどの緑と黄色をCIE L*C*h カラーモデルで表現してみましょう。

LCHの明度(L)の部分だけ変化させてカラーパレットを作ります。 80〜20までの輝度を10区切りで、100〜80、20〜0は5区切りで並べてみました。

緑と黄色を並べてみましょう。

HSLと比べると、LCHの同一輝度の色を比較すると、輝度に統一感がありますね。 個人の感想ですが、同じ番号のマントの色と黄色は、だいたい同じ明るさに思えますね。

一応、HSL版を再掲しておきます。

試行錯誤3

このカラーパレットですが、LCH色の端の色が怪しいですね。L100は、もっと白くなって欲しい。

このカラーパレットは、LCH色をRGB色に変換し、そのRGB色をHTML上に表示しています。

しかし、LCH色は、RGB色よりも広い範囲の色を表現できるそうです。 LCH色がRGB色の範囲を超えた場合どうなるのでしょうか?

色の怪しかったマントの色の左端(L100)は、以下のように変換されています。

しかし、LCH色をRGB色に変換した生のRGB値(丸める前の値)は以下のようになります。

RGB値の各色は0〜255までなので、緑成分(G)が262となり範囲を超えています。

その場合、16進RGBに変換時に、範囲を超えた値を強制的に上限or下限の値に置き換えられます。 今回は緑成分の262が255に置き換えられてしまいます。

そのため、怪しい色になったのだと考えられます。

では、どうすれば良いのでしょうか?

luncheon/lch-color-wheelでは、丸める前の生のRGB値を取得し¹、0〜255を超える成分がある場合は、 もう一度LCH色に戻り、LCH色の 彩度(C) の値を調整してRGB値が0〜255に収まるように補正しています。²

これにより、RGBの各成分が均等に丸められます。(RGBの特定成分だけが255や0に丸められるのを避けることができます。)

この方法を採用してカラーパレットを表示してみましょう(赤字部分は補正のあった色になります。)。³ より自然なカラーパレットになった気がします。

マントの色と黄色のパレットを突き合わせて確認しましょう。

個人の感想ですが、対応する各色は同じ明るさに見えますね。(L90は少し怪しいですが…)

まとめ

最終的なマントの色のカラーパレットは以下になります。(L100とL0は、ほぼ白と黒になるので削っています。)

カラーパレットを作成するには、HSLではなく、CIE L*C*h カラーモデルを利用したほうが良さそうですね。

ただ、以下の記事に紹介されているように、実際のカラーパレットは、単純に輝度を変化させるだけではなく、目的に応じて個別に彩度と色相に調整を入れるようです。(L95は調整が必要かも…)

また、デジ庁のカラーパレットは色番号に50〜1200までを採番しています。 でも、この採番ルールがわからないので、自分専用のカラーパレットであれば、今回のように色番号に輝度(L)をそのまま使えば良いと思いました。

文字や背景色とした場合のコントラストについての考慮など、いろいろ勉強も必要そうです。

引き続き勉強したいと思います。

参考

• WickyNilliams/pure-color: Pure functions for color conversion and parsing in JavaScript
• luncheon/lch-color-wheel: A wheel-style color picker based on CIE L*C*h color space.
  • LCh Color Wheel
• HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい #JavaScript - Qiita
• UIデザインにおけるカラーパレットの作り方｜小池 政幸 / TSUMIKI INC.
• 色の数値化には、表色系を使用します。1-楽しく学べる知恵袋 | コニカミノルタ
• <color> - CSS: カスケーディングスタイルシート | MDN
  • hsl() - CSS: カスケーディングスタイルシート | MDN
  • lch() - CSS: カスケーディングスタイルシート | MDN