画像からカラーコードを抽出（スポイト）

画像をファイル選択・ドラッグ＆ドロップ・Ctrl＋Vで開き、色を調べたい場所をクリック（タップ）してください。スポイトがその画素の色をHEX・RGB・HSLで表示し、画像のメインカラーも抽出します。画像がアップロードされることはありません。

計算方法

画像は端末から外に出ません

スポイトはすべてブラウザ内で動作します。画像はその場でデコードされてキャンバスに描画され、色の値はgetImageData()でメモリから直接読み取ります。アップロードは一切なく、画像データを含む通信も発生しません。ページを閉じれば画像は消えます。ブラウザが自力で開けないHEIC写真の場合だけ、このサイトからデコーダーを一度読み込みますが、写真自体は端末内にとどまります。

カラーコードを調べる方法

画像を選ぶか、枠内にドラッグするか、Ctrl＋Vで貼り付けます（スクリーンショットなど）。
調べたい場所をクリック（タップ）します。キーボードなら矢印キーで1画素ずつ動かせます。
HEX・RGB・HSLの値をコピーします。直近8色は色見本として画面に残ります。

メインカラーの求め方

メインカラーは、画像を長辺200画素以下に縮小してから求めます。不透明な画素をそれぞれ4,096個の色の区分（各チャンネル16段階）に振り分け、互いに十分異なる出現数の多い区分を最大6色まで表示します。割合は不透明な画素全体に占める比率です。簡易的な減色処理なので、全体の傾向をつかむ目安であり、測色ではありません。

元の色と値がずれる理由

カラープロファイル：プロファイル付きの画像（スマートフォンのDisplay P3など）は、ブラウザがsRGBに変換して表示します。スポイトが示すのはCSSで使うsRGBの値で、P3で作業する画像編集ソフトとは数値が異なります。
圧縮：JPEGやWebPは非可逆圧縮のため、「ベタ塗り」に見える部分でも隣り合う画素の値が数段階ずれることがあります。
非常に大きな画像（一辺4,096画素超）は読み取り用に縮小されるため、周囲の画素と平均化されます。表示される座標は元画像のものです。

例：純粋な赤をクリックすると、#FF0000、RGB 255, 0, 0、HSL 0°, 100%, 50%と表示されます。取得した色は、カラーコード変換ツールで別の形式に変換したり、配色ジェネレーターで相性のよい色を作ったり、コントラスト比チェッカーで読みやすさを確かめたりできます。

よくある質問

画像はアップロード・保存されますか？

いいえ。画像はブラウザのメモリ内だけで処理され、どこにも送信されません。ブラウザのストレージ（localStorage）にも保存されません。

スクリーンショットからカラーコードを調べるには？

スクリーンショットを撮り（WindowsはWin＋Shift＋S、MacはCmd＋Ctrl＋Shift＋4でクリップボードにコピー）、このページをクリックしてCtrl＋V（MacはCmd＋V）を押します。調べたい場所をクリックすれば、すぐにHEXコードが表示されます。

ブラウザだけでスポイトツールを使えますか？

はい。このページはインストール不要で、パソコンでもスマートフォンでもブラウザだけで使えます。Photoshopなどの画像編集ソフトがなくても、画像内の色をクリックしてカラーコードを確認できます。

対応している画像形式は？

ブラウザが開けるJPG、PNG、WebP、GIF、BMP、AVIFと、iPhoneのHEIC写真です。透過画像では画素の不透明度も表示します。

HEX・RGB・HSLの違いは？

どれも同じ色を表します。RGBは赤・緑・青を0〜255で、HEXはその値を16進数で（#FF0000＝255, 0, 0）、HSLは色相・彩度・明度で表します。

出典・根拠

MDN Web Docs – CanvasRenderingContext2D: getImageData()
CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors

更新日：2026年9月27日