画像の配色抽出：主要色・8色パレット・HEX 値
ポスター・スクリーンショット・写真を選ぶと、ブラウザ内でメディアンカット量子化により主要色と8色パレットを算出します。スウォッチには HEX が表示され、クリックでコピーできます。色数の変更、HSL/CMYK 出力、CSS 変数の書き出しはありません。
この配色抽出ツールが出力するもの／しないもの
主要色と8色パレット
読み込みのたびにメディアンカット量子化を実行し、最大の色クラスタが主要色になります。パレットは常に8色です。画像はアスペクト比16:9の領域に contain で表示されるプレビュー専用で、ピクセル単位の操作はできません。
色数・形式の設定は不可
パレット数は8で固定（主要色は別途5色の量子化から取得）され、内部は RGB、表示は小文字 HEX のみです。HSL・CMYK・RGB のテキスト表示も、CSS 変数の書き出しもありません。
スウォッチをクリックして HEX をコピー
各円形スウォッチをクリックすると HEX をクリップボードにコピーし、トーストを表示します。画像自体はクリックできないため、スポイト機能や1ピクセルだけを取得する方法はありません。
canvas 処理だが、ローカルファイルのみ
選択した画像を canvas に描画し getImageData で読み取る処理は、すべてブラウザ内で完結します。画像 URL の入力欄がないため、クロスオリジンによる canvas の汚染は発生せず、選択したファイルだけを解析します。
サンプリングはほぼ白と透明を除外
10ピクセルごとに1つをサンプリングし、alpha が125未満のピクセルと、3チャンネルすべてが250を超えるほぼ白のピクセルは無視されます。白背景や透明部分が結果を支配することはありません。
画像の配色抽出に関する FAQ
色はどのように計算されますか？
ColorThief のメディアンカット量子化（MMCQ）を使用します。主要色は5色の量子化の最初のクラスタ、パレットは8色の量子化です。quality の既定値は10で、10ピクセルごとにサンプリングします。
色数を変更できますか？
できません。8色は固定で、スライダーも入力欄もありません。主要色は別の5色量子化から取得されます。新しいファイルを選ぶたびにパレットは再計算され、置き換わります。
どの色形式で取得できますか？
小文字の HEX のみです。各スウォッチに表示され、クリックでコピーされます。RGB・HSL・CMYK の数値表示、CSS カスタムプロパティ、PNG やテキストの書き出しはありません。
スポイトや1ピクセルの取得はできますか？
できません。画像はプレビュー専用で、スウォッチをクリックするとその HEX をコピーするだけです。ピクセル単位の取得や、写真上の任意の点をサンプリングする機能はありません。
画像はアップロードされますか？canvas で処理しますか？
すべてローカルの canvas 内で処理され、アップロードは一切ありません。ファイルは object URL で読み込まれ、固定の16:9プレビュー領域に表示された後、原寸で canvas に描画して解析します。
クロスオリジンの画像は canvas を汚染しますか？
このページはローカルファイルの選択のみに対応しており、URL 入力も getColorFromUrl の呼び出しもありません。そのため CORS による汚染は起こりません。Web 上の画像を使う場合は、いったんダウンロードしてからファイルとして選択してください。
白や透明な領域が除外されるのはなぜですか？大きな画像はどうなりますか？
alpha が125未満のピクセルと、3チャンネルすべてが250を超えるほぼ白のピクセルはスキップされます。非常に大きな画像は原寸で描画し全体を読み取るため、処理が遅くなりメモリも多く使います。リサイズやサイズ上限はありません。
