画像から配色パレット：主要な色と色コード

使い方

各画素は CIE L*a*b* に変換されます。この色空間では、2色の距離が目で見た違いに近くなります。その後、k平均法（k-meansクラスタリング）で、選んだ色の数に画素をまとめます。各グループの中心は、画素がその中心に最も近くなるように定められます。

開始の中心は、固定の乱数種を使う k-means++ の方法で選ばれるため、同じ写真は常に同じパレットになります。各色は、そのグループの画素の平均で、その割合は、グループの画素数を全画素数で割った値です。

画素 → (L*, a*, b*)
グループ：各画素は最も近い中心に属し、中心はその画素の平均
色 = グループの平均RGB、割合 = グループの画素数 ÷ 全画素数

16進数コードは、赤、緑、青の値を16進数2桁ずつの3組で書いた色です。RGBの値は同じ数を10進数で示したものです。HSLは、色相を色相環の角度（0は赤、120は緑、240は青）、彩度を鮮やかさ、明度を明るさで示します。

割合は、画像の画素のうちその色に属するものの割合で、その色が占める面積です。小さく明るい点は割合の小さい色で、大きくぼやけた背景は、似た色合いが多く集まって1つの大きな割合を作ることがあります。

赤の画素50個、青30個、緑20個のテスト画像は、各ブロックが単色のため、ちょうど3色になります。6色を指定しても、このツールはその3色だけを返し、作り出した色は加えません。

一覧は割合の大きい順に並び、各コードはそのブロックの正確な色です。

色は写真と正確に一致しますか？

一様な面は、その正確な色になります。グラデーションのある写真では、各グループの平均になります。写真の公正な要約ですが、そこに含まれるすべての色合いを示すものではありません。

なぜ毎回同じパレットになるのですか？

まとめる処理は固定の乱数種から始まるため、同じ写真と同じ色の数では、いつも同じパレットになります。写真や色の数を変えると、結果も変わります。

色の数はいくつにすべきですか？

5色で、ほとんどの写真の主な雰囲気は捉えられます。複雑な写真や、絵画やデザインでより多くの色合いが必要な場合は、8から10色を使ってください。

私の写真はどこかにアップロードされますか？

いいえ。写真はブラウザの中で読み込まれ、パレットは端末の中で求められ、何も送信されません。

16進数、RGB、HSLの違いは何ですか？

3つは同じ色を3通りに表します。16進数とRGBは赤、緑、青の量を、16進数と10進数で示します。HSLは色相、彩度、明度を示し、目で見て調整しやすい形式です。

数値と文章の最終確認日：2026年11月10日火曜日。