画像からのカラーピッカー

画像カラーピッカーとは何ですか？

画像から色を選択する方法

1. 1
   画像をドロップ

   JPG、PNG、WebP、GIF、またはBMPファイルをアップロードエリアにドラッグするか、デバイスから選択するためにクリックします。画像はプレビューサイズで作業スペースにレンダリングされますが、ピクセルサンプリングは元の解像度のコピーに対して行われます。

2. 2
   ホバーして色をプレビュー

   画像の上にカーソルを移動します。拡大鏡がカーソルの上に表示され、8×ズームでその下の正確なピクセルを示し、中央に1ピクセルのマーカーがあります。キャンバスの下にあるカーソルの色カードは、HEX、RGB、HSLでライブ更新されます。

3. 3
   クリックして色をパレットに追加

   任意のピクセルをクリックして、その色をパレットに追加します。重複は自動的にスキップされるため、リストが膨らむことなく自由にクリックできます。1つのパレットには最大20色が収まります。

4. 4
   1クリックで任意の値をコピー

   パレット内の任意のHEX、RGB、またはHSLをクリックしてクリップボードにコピーします。スウォッチ自体をクリックしてそのHEXをコピーします。全体のパレットもCSSカスタムプロパティのブロックとしてエクスポートされます (--color-1, --color-2, …)。

5. 5
   リセットして別の画像を試す

   新しい画像をクリックして作業スペースをクリアし、別のファイルを読み込みます。パレットカード内のクリアを使用して画像を保持しながらパレットを再スタートします。

ブラウザのピクセルサンプリングの仕組み

1. new Image()でソースファイルをデコード — ブラウザはJPG/PNG/WebP/GIF/BMPをネイティブに処理します。
2. 元の解像度の画像をオフスクリーンキャンバスに描画します。
3. 可視キャンバスにダウンスケールされたプレビューをレンダリングします（長辺最大900px）。
4. ホバー時に、プレビュー空間からソース空間の座標にカーソル（x,y）をマッピングします。
5. getImageData(sx, sy, 1, 1)を介してピクセルを読み取ります。data → [R, G, B, A]。
6. HEX（R/G/Bを2桁の16進数として）およびHSL（rgbToHsl）に変換します。

参照: MDN — CanvasRenderingContext2D.getImageData

一般的なカラーピッキングの仕事

画像カラーピッカーを使用するタイミング

• ロゴPNGからブランドカラーを抽出してCSS変数パレットを構築します。
• デザインサイトからのスクリーンショットをFigmaを開かずにスタイルシートに合わせます。
• 絵画、編み物、または3Dテクスチャ作業のために写真から5-7色のリファレンスパレットを引き出します。
• レンダラーが生成した正確な色を確認します — スクリーンショットが「おかしい」と見えるが、その理由がわからないときに便利です。
• プレゼンテーションデッキのためにムードボードやインスピレーションスクリーンショットから色をサンプリングします。
• 再デザインのために実世界の写真（空の青、テラコッタなど）からペイントや布の色を選択します。
• ヒーロー画像から直接テーマパレットを構築し、周囲のUIが視覚的に統一されるようにします。

関連ツール

よくある質問