知覚的に自然なカラーパレットを計算によって生成する

背景

最初に自作のカラーパレットを作成したのは2020年で、以降5回にわたって更新してきた。

背景色、アクセント用の色、文字色などの組み合わせを選択しやすい明度カーブで、使いやすいカラーパレットだったが、

色相ステップが4つしかなく、活用できる場面が限定的だった。

多数の色相ステップを一様に扱えるカラーパレットが欲しくなってきた。

カラーパレットを生成するためのプログラムを作成し、(48+2)色相×11明度から成る巨大なカラーパレットを、ライトモード用とダークモード用の2種類生成して使用することにした。

colors550の特徴と、colors550が知覚的な自然さを獲得した理由

1. 見やすい配色を作りやすい11段階の明度カーブ

全ての色相ステップについて、明度600を基点明度として設定している（ダークモード用の場合は400）。

全ての色相ステップについて、「白地に対して明度600の文字」「明度0の背景に対しては1段上げて明度700の文字」というように、一様な方針で使用する明度を決定でき、しかも見やすさにつながる。

2. 色相ステップ間の輝度差が適切

同じ明度ステップで、色相ステップ間の輝度が大きく異なると、複数の色相ステップを一様な方針で使うことが難しくなる。

色相ステップ間で輝度カーブが全く同じになるように作ると、画面上で高輝度を表現できない色相に合わせてカラーパレットを作ることになるので、濁った色のカラーパレットになってしまう。

colors550は、色相ステップ毎の画面上での高輝度の再現性に合わせて輝度カーブを決定しているため、全く異なる色相ステップであっても、同じ画面上で一様な方針で使うことができる。

3. 色相ステップ間の色相差が知覚的に等しい

輝度カーブがほとんど同じ色相ステップを隣同士に並べた場合は、輝度カーブが大きく異なる色相ステップを隣同士に並べた場合と比べて、たとえ色相差の「数値」が同じであっても、知覚的には近い色相に見えてしまう。

colors550は、輝度カーブがほとんど同じ色相ステップが隣同士に並ぶ場合は、ステップ間の色相差の「数値」が大きくなるように調整しているため、全体として色相ステップ間の色相差が知覚的に等しくなる。

上記の特徴を持ったカラーパレットを生成できるようなプログラムを作成して、そのプログラムでカラーパレットを生成した。

ソースコードは近日公開予定。

プログラムは以下の値からカラーパレットを生成する

必ず含める色相ステップのOKLCH色相値

補間する色相ステップの数

ライトモード、ダークモードの別

基点明度ステップの色と背景色の間のAPCAコントラスト値

基点明度ステップより明るい側のステップ数

基点明度ステップより暗い側のステップ数