画像カラーピッカー

画像のピクセルをクリックして色を取得。拡大鏡で正確なピクセルを確認でき、HEX、RGB、HSLの値と、取得した色の履歴も表示されます。

ここに画像をドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

すべてブラウザ内で実行されます。データがアップロードされることはありません。

画像カラーピッカーとは？

画像をアップロードまたは貼り付けて任意の点をクリックすると、そのピクセルの正確な色をHEX、RGB（半透明ならRGBA）、HSLで読み取れます。拡大鏡がカーソル周辺のピクセルを表示し、X/Y欄で正確なピクセルを指定でき、取得したすべての色はクリックできる履歴に保存されます。

画像カラーピッカーの使い方

画像をドロップ、選択、または貼り付けます（Ctrl+Vで貼り付けたスクリーンショットも便利です）。
画像の上でポインターを動かして拡大表示を見て、クリックして色を取得します。
または、正確なピクセル座標のXとYを入力します。
HEX、RGB、HSLの値をクリックしてコピーします。以前の色は取得した色から再利用できます。

例

入力

40×20 image whose top-right quadrant is pure green, pixel X=25, Y=5

出力

#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)

画像カラーピッカーを使うべき場面

ロゴやスクリーンショットからブランドカラーを合わせたり、デザイン用に写真から色を取ったり、UI要素の正確な色を確認したりするときに使います。JPEG圧縮とアンチエイリアスはピクセルの色をわずかに変えるため、エッジではなく均一な領域から取得してください。パレット全体を一度に取得するには、画像カラーパレットを使ってください。

画像カラーピッカーの仕組み

画像はフル解像度でcanvasに描画され、そのピクセルは getImageData で一度だけ読み込まれます。クリックは画面座標から画像のピクセル座標に対応付けられ、そのインデックスのRGBA値がHEXとHSL（色相は度、彩度と明度はパーセント）に変換されます。拡大鏡は、スムージングなしで11×11ピクセルの周辺を再描画します。