前回のおさらい
前回の記事では、カラーパレットを1から作るために押さえておくべきであろう情報をまとめました。
カラートークン、色空間、コントラスト比、カラーモデルの4つですね。
前置きはこれくらいにして、では実際にPrimitive Colorのカラーパレットを作っていきます。
今回達成したいこと
- 複数の色相のPrimitive Colorを作成する
- 異なる色相のカラースケールのステップごとに知覚的な明るさ、カラーコントラスト比を揃えたい
- 作成したPrimitive ColorはSemantic Colorの参照先として使用される
- 作成したPrimitive ColorはsRGBの色空間で利用する
今回は2を達成するために、前提編で紹介したLCH、OKLCH、HCTの3つのカラーモデルを試してみます。
1. LCHを使ってみる
1.基準となる色・色相を選ぶ
まずは、ブランドカラーなどパレットに含むべき色や色相からスタートします。今回は#00E0ADを選択しました。
2.キーカラーのLCHの値を計測する
2025年時点ではFigmaにはLCHのサポートがないため、LCHというプラグインを使用します。
LCHの値は80,58,168でした。
3.L値を増減させてスケールを展開する
Lightness（明度）の値を増減させてスケールを展開していきます。
今回の例ではテストとして以下のルールとしました。
- Lightnessのステップ幅は8刻み
- 10ステップ幅にLightness99%のステップを加えた合計11ステップ
- Chroma（彩度）は
58を指定し、sRGBの色域内に収まるようChromaを調整する
錯視を考慮するのであれば、ステップ幅は線形でよいのか？という声もありそうですが、LCHのベースであるCIELABは既に人間の知覚に対して均等になるように設計されている（Lightnessの値そのものが非線形補正を含んでいる）ため、今回は調整を行いませんでした。
なお、このプラグインではsRGBの範囲外の色を指定した場合、自動的にChromaを下げて色の置き換え（クリッピング）をしてくれます。
4.複数の色相に展開していく
3で作成したスケールを複製し、Hue（色相）の値を変えて複数の色相に展開していきます。
たったこれだけの作業でカラースケールが完成しました。HSLで必要な色相ごとの調整作業は不要になり、もはや誰でもできますね。
画像の右はグレースケールに変換したもので、知覚的な明るさは各色相同士でほぼ一致していることが分かります。コントラスト比も大体一致（0.3前後の誤差）していました。
属人性を排し数値的なルールで止めるという方針もありそうですが、筆者の意見としてはここからChromaを追い込み、より自然なグラデーションに調整すると良さそうだと思いました。
ただし！
前提編でLCHの欠点として触れましたが、青系の色相で紫方向へとシフトする現象が起きています。
目視で整えても良いですが、次はこの問題を解決する改良版のOKLCHを見ていきます。
2. OKLCHを使ってみる
ということでOKLCHです。FigmaでOkColorのプラグインを使用します。ルールはLCHと同じです。
1.キーカラーとなる色を選ぶ
同じく#00E0ADを選択します。
2. キーカラーのOKLCHの値を計測する
プラグインにカラーコードを入力し、OKLCHの値を取得します。
3. L値を増減させてスケールを展開する
LCHと同様、Lightnessを段階的に変化させてスケールを作成します。sRGBの色域に存在しない場合、Chromaを落としていきます。
4. 複数の色相に展開させる
ここまでできたスケールを、Hue（色相）を変えて展開しました。結果は・・・
低いLightness帯を比較すると、OKLCHはより色が沈む傾向がありますね。僅かな差ですが、ステップ幅のグラデーションはLCHの方がスムーズな印象があります。
LCHでの色相シフト問題は、OKLCHではほぼ解決されており、とても自然です。
難点に感じたのは、色相が異なる場合のコントラスト比です。計測すると、LCH以上に差が開くことがありました(1.0以上発生することも)[1]。これを運用するとなると、特定のステップでこの色相はコントラスト比を満たすが、こっちでは満たせない・・・ということが発生しそうで管理が煩雑になりそうと感じました。
3. HCTを使ってみる
最後に、GoogleのMaterial Design3で採用されているHCTを試してみます。FigmaではHCT Color Pickerというプラグインを使っていきます。
1.キーカラーとなる色を選ぶ
同じく#00E0ADを選択します。
2. キーカラーのHCTの値を計測する
プラグインで同様に値を取得します。
3. Tone（明度）を増減させてスケールを展開する
選択した色がsRGBの色域に存在しない場合、Chromaが自動で補正されます。
4. 複数の色相に展開させる
結果は・・・
いい感じ！ ステップ幅のグラデーションが自然です。
別の色相同士での明度も知覚的にも問題ないし、コントラスト比を計測するとほぼ同じ値（誤差0.01程度）となるのが素晴らしいです。
色相シフトの比較です。LCHほどではありませんが、僅かにシフトはしますね。ここはOKLCHが最も自然に感じました。
結論
カラーモデルを使うことでコントラスト比を意識しながら簡単にカラーパレットを作ることができることが伝わったら幸いです。それぞれ良し悪しはあれど、sRGBで運用する前提であれば、私はHCTが最も使いやすいと感じました。カラーパレットを1から作るという方は是非参考にしてみてください。
-
OKLCH Color Picker & Converterでも試してみましたが、結果は概ね同じでした。 ↩︎
Discussion