画像カラーパレット抽出とは
写真・イラスト・スクリーンショットの色を、少数の主要色へまとめるツールです。各色を大きい割合順に並べ、Web制作などで使いやすいHEXとRGBを表示します。
抽出方法
画像を縦横比を保ったまま長辺最大320pxへ縮小samplingし、RGBを5bitずつにまとめたhistogramを作ります。そのhistogramをalpha重み付きの決定論的median-cutで分割し、各グループの実pixel weighted meanを代表色にします。同じ入力と色数では常に同じ結果になります。
推定割合について
表示する割合は元画像の全pixelを厳密に数えた値ではなく、解析用に縮小したsample pixelから求めた推定値です。小数1桁への丸めにより合計が99.9%や100.1%になる場合があります。
色空間について
ブラウザのCanvasへ描画したsRGB 8-bit RGB値を基準にします。広色域画像などではブラウザのCanvas色変換後のRGB値となり、Display-P3やICC profileを厳密に測色するツールではありません。
透明画像の扱い
完全透明pixelは主要色から除外します。半透明pixelはalphaを0〜1の重みとして扱うため、ほぼ透明な色がパレットを不自然に支配しにくくなります。
プライバシー
画像の確認、デコード、縮小sampling、色抽出、コピーはすべてブラウザ内で行います。画像・ファイル名・pixel・palette・設定を外部へ送信またはStorageへ保存しません。
よくある質問
画像はアップロードされますか？
いいえ。選択した画像はブラウザ内だけで処理し、サーバーや外部APIへ送信しません。
何色まで抽出できますか？
3〜12色から選べます。画像内の色数が少ない場合は、存在しない色を水増しせず少ない色数で表示します。
HEXとRGBの違いは？
どちらも赤・緑・青の値を表します。HEXは16進数の#RRGGBB、RGBは10進数のrgb(R, G, B)形式です。
透明PNGはどう扱われますか？
完全透明pixelは除外し、半透明pixelはalphaに応じて軽く重み付けします。透明部分だけの画像からは色を抽出できません。
元画像と完全に同じ色になりますか？
縮小samplingと量子化を行うため、表示色と割合は主要色の推定です。代表色には各グループに含まれる実pixelの加重平均を使います。
P3やICC profileの色はどうなりますか？
ブラウザが画像をCanvasへ変換した後のRGB値を使います。専門的な測色やprofile解析には対応していません。