画像からカラーパレット抽出

写真やロゴから抜き出したパレットは、Webサイトやスライド、ブランドキットを画像に合わせる最も手早い方法です。このツールは似たピクセルをまとめ、主要な色をHEX、RGB、HSLの値と、それぞれが画像に占める割合で表示します。パレット画像、CSSカスタムプロパティ、そのまま貼り付けられるTailwindのスニペットも得られます。解析はブラウザ内で行われ、画像がアップロードされることはありません。

使い方

1. 画像を1枚以上選びます。
2. 欲しい色の数を設定します（2〜16）。
3. 方式を選びます。写真にはk-means、手早く結果を得るにはメディアンカットが向いています。
4. ロゴやフラットなグラフィックでは「最も多い正確なピクセル色」を選ぶと、正確なブランドカラーが得られます。
5. HEXコード、CSSまたはTailwindのコードをコピーするか、パレットPNGをダウンロードします。

計算式

ΔE = √((L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²)（CIE Lab）；割合 = グループのピクセル数 ÷ 対象ピクセル数

k-meansはk-means++の方法で中心をk個決め（色の出現頻度で重み付け）、「すべての色を最も近い中心に割り当て、各中心をグループの平均へ移動する」処理を最大20回繰り返します。距離は、同じ距離が目で見てもほぼ同じ違いに感じられるLabで測ります。メディアンカットは、赤・緑・青の幅がもっとも広い色の箱を加重中央値で分割し続けます。このオプションをオンにすると、透明なピクセル（アルファが50%未満）は除外されます。

計算例

青（#2563EB）の背景に半径25 pxの黄色（#FBBF24）の円がある120 × 80のロゴでは、円は9,600ピクセル中π × 25² ≈ 1,964ピクセルを占めます。2色・正確な値で解析すると、#2563EBが約79.5%、#FBBF24が約20.5%と表示されます。