「スポイト（色取得）」は、1 枚の画像から色を正確に取り出すツールです。マウスを画像の上で動かすと、カーソルのそばに 120px の円形ルーペが付いてきて、周囲 15×15 個のピクセルを拡大表示し中心のマスをハイライトします。グラデーションや輪郭の付近でクリック位置がずれるのを防げます。クリックすると色値が「現在の色」に書き込まれ、HEX が自動でコピーされるとともに rgb() と hsl() の 2 つの表記も表示されます。画像を読み込むと 128px 幅に縮小して色のクラスタリングを行い、8 つの主色を抽出して割合順の色帯として描画します。処理はブラウザ内で完結します。

「カラーツール」とは違い、ここでの色は画像のピクセルから来ます。「画像ヒストグラム」とも違い、こちらは明暗の分布ではなく具体的な色値に注目します。

1. 01画像を 1 枚アップロード単一画像モードです。画像は取色用キャンバスに描画されます（長辺が 2048px を超える場合は先に 2048 へ縮小）。
2. 02動かして色を見る画像の上でマウスを動かすとルーペがカーソルに追従し、端に近づくと自動で反対側へ回り込みます。ルーペの下には HEX がリアルタイムで表示されます。
3. 03クリックで取色クリックするとそのピクセルが「現在の色」になり、HEX がクリップボードへコピーされます。右側には HEX / RGB / HSL が表示され、各行に個別の「コピー」ボタンがあります。
4. 04主色パレットを使う「主色パレット」の 8 つの色ブロックはピクセル占有率の順に色帯として並び、どのブロックをクリックしても同じようにコピーできます。「取色履歴」には直近 16 件の重複しない色が記録されます。

HEX は自動でクリップボードへ

8 つの主色は 128px のサムネイルからクラスタリングで算出

細かいピクセルは統合されるため、取色は少し平均化される

画像の空をクリック

HEX `#4A90D9`、`rgb(74, 144, 217)`、`hsl(211, 65%, 57%)`

ブランドポスターを読み込む

色帯で最も幅の広い区間がポスターの主色で、残りは面積の降順

長辺 6000px の大きな画像

取色キャンバスは 2048px に縮小

対応入力

JPG / PNG / WebP / GIF / BMP / AVIF / HEIC。一度に 1 枚

取色の解像度

キャンバスの長辺上限は 2048px。巨大な画像では縮小後のピクセルから取るため、元画像の 1 ピクセル単位ではありません

透明ピクセル

取色は alpha を考慮せず、透明部分はキャンバスに合成された RGB として読み取られます

主色の数

8 個で固定。数を変えたり背景色を除外したりはできません

やらないこと

色形式の相互変換やパレット生成（→「カラーツール」）、配色ファイル（ASE / GPL）の出力、画面外からの取色

画像はブラウザ内で canvas に描画して取色され、サーバーへアップロードされることはありません。クリップボードへのコピーはクリックしたときにだけ行われます。