画像はどこかにアップロードされますか？

いいえ。画像はブラウザ内の非表示canvasに描画されローカルで解析されます。サーバーには一切送信されません。

代表色はどのように計算されますか？

画像を長辺最大100pxに縮小し、各ピクセルのRGB値をチャンネルごとに32刻みで量子化してグループ化し、出現頻度の高い上位10グループを表示します。透明度が半分を超えるピクセルは無視されます。

抽出されたhexコードが画像から直接拾った色と微妙に違うのはなぜですか？

近い色をまとめるためRGB各チャンネルを32の倍数に丸めています。結果は色のクラスターの代表値であり特定の1ピクセルの値ではないため、個々のピクセルとはわずかに異なることがあります。

画像カラー抽出ツール

概要

任意の画像から手早くパレットを作るツールです。写真・スクリーンショット・ロゴなどを選ぶと、使用頻度の高い上位10色をスウォッチとhexコードで返します。内部では画像を長辺最大100pxに縮小し、RGB各チャンネルを32刻みで量子化して近似色を統合、ほぼ透明なピクセルを除外した上で、ピクセル数の多い順にランキングします。解析はブラウザ内のcanvasで行われ、ファイルが外部に出ることはありません。

使い方

Choose imageをクリックし、画像ファイル(PNG・JPEG・WebPなど)を選択します。
表示されたスウォッチを確認します。最大10色が頻度順に並び、それぞれにhexコードが付きます。

使用例

競合ロゴのスクリーンショットからブランドパレットを抽出し、自社のデザイントークンと比較。
ヒーロー写真の主要色を取り出し、それに合うアクセント色・背景色を決定。
「単色」のはずの背景PNGに、圧縮由来の近似色が混ざっていないかを確認。

注意事項

縮小処理のため巨大な画像でも問題なく扱えますが、パレットは縮小後の画像を反映します。細い線や1ピクセル単位のアクセントなど微細な色は結果に現れないことがあります。透明領域は結果に影響しません。