仕組み

K-means または Force Vector（反発）アルゴリズムで色を均等に配置します
計算には人間の知覚に沿う CIE L*a*b* 色空間を使用します
制約の指定には操作しやすい Hue / Chroma / Lightness* 色空間を用います

Mike Bostock の d3.js 例を基にしています

RGB ランダム - 目が散る色や似通った色が混在し、明るさも不均一

カスタムパレット - 一貫性のある最適な配色で、知覚上の明るさも揃っています

例

上品な配色

多くの場合、次のようなシンプルな要件を満たしたいだけです。

はっきり区別できる色（iWantHue が常に担保）
落ち着いた控えめな色（Chroma を低めに設定）
一貫性のある明るさ（背景に応じて Lightness の幅を狭く保つ）

Fancy プリセットはこれらの性質を満たす汎用パレットを最大 10 色まで生成します。 Chroma と Lightness の幅を絞っているため、扱える色数も 10 色程度に限定されます。

色空間

サンプルパレット

例

上品（ダーク背景）

暗い背景では Lightness の範囲を別に設定する必要があります。それでも Chroma と Lightness の幅を狭く保つという方針は変わりません。

一貫性を保つには、背景と程よくコントラストのある Lightness 範囲を選びます。内容を読ませるには十分なコントラストが必要ですが、派手になりすぎないよう背景と近い明るさにとどめます。

色空間

サンプルパレット

例

Tarnish（くすみ）

このプリセットはわずかに色味を帯びたグレーを作り出します。Chroma の上限をかなり低く設定することで実現できます。彩度の高い色で視線が散るのを避けたいときに便利です。

色空間を絞るほど、得られる色数は少なくなります。 Chroma の幅が狭いので、Lightness は広めに確保して差をつけます。どの色もグレー寄りになるため、明るさで見分ける必要があるからです。

色空間

サンプルパレット

例

Pimp

このプリセットでは Chroma を高め、色のインパクトを最大化しています。かなり強烈な色合いになります。 Chroma と Lightness の範囲を広く取っているため、より多くの色を区別できます。

青〜紫が多く、緑が少なく黄色がないことに気付くかもしれません。これは人間の知覚特性によるもので、設定した最大 Lightness では黄色が許容されないためです。

色空間

サンプルパレット

例

Pimp（明るめ）

Chroma の範囲はそのままに、Lightness を大幅に明るくしたバリエーションです。その結果、黄色や緑が増え、紫が減り赤は現れません。これも CIE Lab 色空間を使うことによる副作用です。

色空間

サンプルパレット

例

特定の色のバリエーション

Hue の範囲を絞ると、同系色のバリエーションが得られます。 緑系だけを選べば、異なる緑だけで構成されたパレットになります。バリエーションを確保するには Lightness と Chroma の幅を広く取りますが、Chroma を低くしすぎるとグレーになるので避けます。また暗色や明色も抑え、全体の調和を保ちます。

色空間

サンプルパレット

例

大きなパレット

色空間に十分な余裕があれば、大きなパレットも構築できます。ここでは白背景に黒文字という前提で暗色を避け、全体の調和を保つために高 Chroma も抑えています。高 Chroma は色空間の占有が小さいため、パレット全体の制約はそこまで厳しくしていません。

色空間

サンプルパレット

例

別の例

とんでもなく大きなパレット

色空間の広さに対して色数が多すぎると、どうしても似た色が入り込んでしまいます。とはいえ常に区別しやすい順に並ぶので、先頭の色ほどはっきりと異なるようになっています。

色を作りすぎた場合でも、先頭の色だけを使えば安心です。そこには十分な差があります。

こうした極端なケースでは「hard（Force vector）」設定を選んでください。 k-Means（soft）が失敗するような狭い色空間でも、このアルゴリズムなら色を生成できます。