よくある場面として、元データのない参考素材から配色を再現しなければならないことがあります。手元にあるのはローンチ動画のスクリーンショット、書き出されたモックアップ、古い PDF だけ。従来のやり方は、画像の一部を切り抜いて画像編集ソフトに貼り付け、スポイトで拾って HEX をコピーする作業を色の数だけ繰り返すことでした。

画面上の色の取得には、以前は専用アプリか、独自の権限を求めるブラウザ拡張機能が必要でした。Chrome 95 以降の Chromium 系ブラウザには EyeDropper API があり、一般的な用途はこれで足ります。ブラウザが独自のピッカーを表示し、ユーザーが 1 ピクセルを選ぶと、ページは sRGB の HEX 文字列を受け取ります。ZeroTool のスポイト カラーピッカー（画像・画面）はこの API を使い、API のないブラウザでも画像や貼り付けたスクリーンショットからピクセルを読み取れます。

EyeDropper API を 60 秒で

EyeDropper の仕様は WICG（W3C のコミュニティグループ）のドラフトです（EyeDropper API）。インターフェースはごく小さなものです。

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // "#3a7bd5"

open() は Promise を返します。ブラウザがピッカーを表示し、ユーザーが画面上の任意のピクセル（ブラウザウィンドウの外や他アプリの上も含む）をクリックすると、Promise は #aabbcc 形式の色を sRGBHex プロパティに持つオブジェクトで resolve されます（MDN）。ユーザーが Escape を押すと、Promise は AbortError で reject されます。

この API を土台に何かを作る前に、押さえておきたい制約が 3 つあります。

  • ユーザーのアクティベーションが必要。 一時的なユーザーアクティベーションがない状態で open() を呼ぶと NotAllowedError で reject されるので、クリックやキー操作のハンドラーから呼び出します。ページ読み込み時の自動起動も、ヘッドレスでのサンプリングもできません。理由は仕様のセキュリティの節にあります。ユーザーが共有するつもりのない画面の情報をページが「スクリーンスクレイピング」できてはならず、ピクセルデータはマウスを押すなどの明示的な操作のあとでだけ渡すべきだとしています。
  • 1 回の呼び出しで 1 ピクセル。 呼び出すたびに 1 色を返してピッカーを閉じます。2 色目が欲しければ、ユーザーにもう一度ボタンを押してもらう必要があります。ピッカーが開いている間に再度 open() を呼ぶと InvalidStateError で reject されます。
  • 出力は sRGB のみ。 結果は常に sRGB の HEX 文字列です。macOS では、Chromium が取得したディスプレイの色を sRGB に変換し、チャンネルあたり 8 ビットに丸めます（skia_utils_mac.mm の CGColorRefToSkColor）。そのため広色域の色は切り詰められて返ります。Display P3 の値を返す手段はありません。

ブラウザ対応（MDN browser-compat-data 8.1.3、2026-09-24）は、デスクトップ版の Chrome・Edge 95 以降と Opera 81 以降です。Linux の Wayland 環境では使えません。Firefox、Safari、Android 版 Chrome、iOS のブラウザは非対応です。機能検出は 1 行で済みます。

if ('EyeDropper' in window) {
  // EyeDropper が使える — 画面取得ボタンを有効化
} else {
  // 別の手段を用意する：画像やスクリーンショットから取得
}

ツールの使い方

スポイト カラーピッカー（画像・画面）には 4 つの入り口があります。

  1. 画面から取得。ボタンを押してから、画面上の任意のピクセルをクリックします。EyeDropper API を使う経路なので、API があるブラウザでだけ表示されます。
  2. 画像を開く。ファイルを開くか、ツールにドロップするか、スクリーンショットを Ctrl+V / ⌘V で貼り付けます。ポインター周囲 11 × 11 ピクセルを拡大するルーペが出て、クリック（または矢印キーで動かして Enter）で 1 ピクセル、あるいは 3 × 3 / 5 × 5 の平均を取得します。すべてのブラウザで使えます。
  3. カラーパネル。<input type="color"> を通じて OS のカラーピッカーを開きます。
  4. 値を入力。どの欄にも CSS の色（HEX、rgb()、hsl()、oklch()、color(display-p3 …)、色名）を貼り付けられ、残りの欄が再計算されます。

出力は HEX、RGB、HSL、OKLCH、Display P3 で、どれも同じ 8 ビットの色に戻せる書き方にしています。直近 16 件は localStorage に保存される「最近の色」に残ります。画像は保存せず、どの経路でもネットワーク通信は発生しません。

4 つの具体的なユースケース

デザインのリバースエンジニアリング

スクリーンショットやモックアップの書き出しから、配色を CSS 変数や Tailwind のトークンに起こしたい場面です。参考画像を任意のウィンドウで開き、「画面から取得」を押して色をクリックします。Firefox や Safari では、参考画像のスクリーンショットをツールに貼り付け、ルーペで色をクリックします。

フローティングパレット、ホットキー、名前付きライブラリといった点では専用アプリが上です。1 プロジェクトで数色を拾う程度なら、ブラウザで十分です。

ブランドカラーの鑑定

マーケティング部門からよくある依頼として「サイトは以前この青だったが元データを失くした。古い PDF やスクリーンショットから合わせられないか」があります。元のトークンがなければ、描画済みの画像から色を読むしかありません。画像をツールで開き、原寸で取得します。JPEG のスクリーンショットは圧縮で隣り合うピクセルの値がばらつくので、3 × 3 や 5 × 5 の平均を使うと安定します。

動画・配信 UI の調査

動画のオーバーレイ、サムネイル、画面録画、スライドなど、画面に映るものはすべて対象です。フレームを一時停止し、「画面から取得」を押してピクセルをクリックします。

得られる値は表示されたピクセルの色です。動画のデコード、拡大縮小、合成を経たうえで、前述のとおり sRGB に変換されます。「ユーザーが見ている色」であって、「元素材が指定した色」ではありません。

アクセシビリティ監査

色が手に入ったら、たいていは別の色とのコントラストを確認したくなります。前景色と背景色を取得し、両方をカラーコントラストチェッカーに貼り付ければ WCAG AA/AAA の判定が出ます。色覚多様性の監査には、取得した色を色覚シミュレーターにかけ、2 型（deuteranopia）や 1 型（protanopia）の見え方を確認してください。

制約と回避策

Safari と Firefox のユーザー。 EyeDropper の機能検出は false を返します。ツールは「画面から取得」を隠し、「画像を開く」を主ボタンにします。スクリーンショットをクリップボードに取って貼り付けてください。Mac ではスクリーンショットのショートカットに control を足します（例：control + shift + command + 4、Apple サポート）。Windows では PrtSc で画面全体がクリップボードに入ります（Microsoft サポート）。OS 付属の画面ピッカーもあります。macOS の Digital Color Meter、Windows の PowerToys のカラーピッカー（Win + Shift + C）です。

連続サンプリングはできない。 1 色ごとにボタンを押し直す必要があります。50 色ならボタン 50 回とピクセル 50 回のクリックです。これはユーザーアクティベーションの規則であり、ツールの制約ではありません。

P3 と HDR の切り詰め。 広色域ディスプレイでは、sRGB 外の色は sRGB に変換されて切り詰められてからコードに渡ります。広色域の値が必要なら画像ファイルから取得してください。Display P3 の canvas を作れるブラウザ（Chrome・Edge 92 以降、Safari 15.2 以降）なら、ツールが P3 の値を読み取り、切り詰めを知らせます。

「最近の色」は localStorage に保存。 ブラウザのサイトデータを消すと消えます。端末内にとどまり、同期はされません。

FAQ

複数ピクセルを一度に取得したり、範囲を読み取ったりできないのはなぜか

この API は、ユーザーの操作 1 回につき 1 色だけを返す設計です。仕様のセキュリティの節は、ページに「スクリーンスクレイピング」をさせてはならないとし、明示的な操作のあとでだけピクセルデータを渡すこと、スポイトモード中であることを明確に示すこと、Esc で抜けられるようにすることを挙げています（EyeDropper API, Security and Privacy Considerations）。

Safari や Firefox のユーザーはどうすればいいか

スクリーンショットを使います。クリップボードにコピーし、ツールで ⌘V か Ctrl+V で貼り付けて、ピクセルをクリックしてください。ツールは原寸で読み取ります。ブラウザを介さずに画面上で直接調べるなら、macOS の Digital Color Meter か Windows の PowerToys のカラーピッカーが使えます。

P3 ディスプレイで Photoshop と違う値になるのはなぜか

Photoshop はドキュメント自身のカラースペースでの値を読みます。EyeDropper API が返すのは、表示された色を sRGB に変換し、チャンネルごとに 0〜255 へ切り詰めた値です。sRGB の外にある色では、2 つの数字は一致しようがありません。P3 の値を見たいときは、Display P3 の canvas に対応したブラウザで書き出したファイルから取得してください。

クリックなしでスポイトを開けるか

開けません。一時的なユーザーアクティベーションがないと、open() は NotAllowedError で reject されます（MDN）。ユーザーが起こしたクリックやキー操作のハンドラーから呼び出してください。

「最近の色」はブラウザやデバイスをまたいで同期されるか

されません。現在のオリジンの localStorage に保存されるため、ブラウザ単位、プロファイル単位、デバイス単位で分かれています。サイトデータを消すと削除されます。アカウントもアップロードも、デバイス間の同期もありません。

関連するカラーツール

HEX を取得したら、次のステップは大抵このあたりに収まります。

スクリーンショットから HEX を取り出したくなったら、スポイト カラーピッカー（画像・画面）を開いてください。無料で、ブラウザ内で動き、タブを閉じたあとに画像は残りません。