EyeDropper API で画面上の任意のピクセルを取得する

提案資料のために競合のダッシュボードを再現する場面を想像してください。手元の参考素材は、ローンチ動画から切り出した 4K スクリーンショットと、Dribbble で見つけた Figma エクスポートが数枚。画面全体で 30 色近くが使われています。サイドバーの塗り、ボタンの 3 つの状態、2 段階のミュートテキスト、6 段階のチャート用パレット。従来のワークフローはこうです。画像の一部を切り抜いて Photoshop に貼り付け、スポイトで色を拾い、HEX をコピーして Tailwind の設定にペースト、これを繰り返す。30 往復した頃には、パレットは揃ったものの手首が悲鳴を上げています。

画面レベルの色取得は、長らく有料ツールの領域でした。ColorSnapper、Sip、Just Color Picker、それに独自の権限を要求する Chrome 拡張機能の長い系譜。しかし Chromium 95 以降、一般的なユースケースであればこれらは不要です。ブラウザには EyeDropper API が標準搭載されています。システムレベルの拡大鏡を起動し、ピクセルを 1 つサンプリングし、sRGB の HEX 文字列を返す。それだけです。ZeroTool の Eyedropper Color Picker は、この API に対するシンプルなラッパーで、フォーマット変換と最近使った色のストリップが付属しています（自前で実装すると意外に手間がかかる部分です）。

EyeDropper API を 60 秒で

EyeDropper は Chromium で生まれた Web API で、現在は WICG が仕様を管理しています。インターフェースは非常にコンパクトです。

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

open() は Promise を返します。ブラウザがカーソルを引き取ってシステムレベルの拡大鏡を表示し、ユーザーが物理画面上の任意のピクセル（ブラウザウィンドウの外、他のアプリの上でも可）をクリックすると、Promise が sRGBHex プロパティを持つオブジェクトで解決されます。値は 7 文字の HEX 文字列です。ユーザーが Escape を押した場合は、Promise が AbortError で reject されます。

実装を始める前に押さえておくべき制約が 3 つあります。

ユーザージェスチャーが必須。open() はクリックまたはキー押下のハンドラ内でしか呼び出せません。setTimeout でごまかすことも、ページ読み込み時に自動で開くことも、ヘッドレスでサンプリングすることもできません。これは設計上の判断です。ページが他アプリのピクセルを無音で読めば、画面キャプチャの脆弱性になってしまうためです。
1 回の呼び出しで 1 ピクセルのみ。各呼び出しは 1 ピクセルだけサンプリングして拡大鏡を閉じます。2 色目を取得するには、ユーザーがボタンを再度クリックする必要があります。「開いたまま連続サンプリング」というモードは存在しません。
出力は sRGB のみ。返される HEX は常に sRGB 色空間の値です。P3 ディスプレイで広色域の画像から色を拾った場合、コードに届く前に sRGB へガマットマッピングされます。ディスプレイネイティブの生の色を読む手段は API から提供されていません。

2026 年時点のブラウザサポート状況は、Chrome、Edge、Opera（いずれも Chromium 95 以降）が対応。Safari と Firefox は未対応です。機能検出は 1 行で済みます。

if ('EyeDropper' in window) {
  // EyeDropper が利用可能 — 画面ピックボタンを有効化
} else {
  // <input type="color"> にフォールバック、またはヘルプを表示
}

ツールの使い方

Eyedropper Color Picker を開くと、3 つの入力モードが表示されます。

画面から取得。ボタンをクリックして、画面上の任意のピクセルをクリックします。HEX、RGB、HSL の各フィールドが同時に埋まります。EyeDropper API を使うパスで、Chromium 系ブラウザ専用です。
ネイティブピッカー。標準の input type="color" ダイアログを開きます。Safari と Firefox を含むすべてのブラウザで動作します。HSV ホイールを使いたい場合や、ゼロから新しい色を作る場合に便利です。
値を入力。既知の HEX、RGB、HSL の値を貼り付けると、残り 2 つが再計算されます。DevTools を開かずにフォーマットを変換したい場合に重宝します。

最近使った 8 色は localStorage に保存される Recent Colors ストリップに残ります。スウォッチをクリックすれば再読み込みでき、「Clear recent」ボタンでクリアできます。データはブラウザの外に出ません。どちらのピッカーパスでもネットワーク通信は発生しません。

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

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

手元にスクリーンショットや Figma エクスポートがあって、Tailwind、CSS 変数、Sketch スウォッチに落とし込むためのパレットが必要な場合。プレビューアプリ、Figma デスクトップ、ブラウザタブなど、どのウィンドウで参照画像を開いてもかまいません。「画面から取得」をクリックし、欲しい色をタップするだけ。拡大鏡は 1× ディスプレイでも 1 ピクセルに正確に着地できるレベルで拡大されます。

80% のケースで、ColorSnapper や Sip のワークフローを置き換えられます。専用アプリは、ピン留めできるフローティングパレット、ホットキーによる高速サンプリング、名前付きライブラリの面で依然として優位です。ただし 1 プロジェクトで 6 色程度なら、ブラウザ API で十分です。

ブランドガイドの考古学

マーケティング部門からよくある依頼です。「以前サイトで使っていたあの青、ソースファイルを失くしたんだけど、古い PDF やスクリーンショット、Wayback Machine のキャプチャから復元できる？」と。元のデザイントークンがない状況では、レンダリングされた画像から色を読み取るしかありません。画像を 1 つのブラウザタブで開き、ツールを別タブで開いて、切り替えてピック。拡大鏡はアクティブタブだけでなく画面全体をカバーするので、画像をツール内に取り込む必要はありません。

動画と配信 UI の調査

Twitch のオーバーレイ、YouTube のサムネイル、AI エージェントの動作を記録した画面録画、カンファレンスのスライドなど、画面に表示されているものは何でも対象になります。フレームを一時停止し、「画面から取得」をクリックし、ピクセルをクリック。従来のデザインツールでは扱いにくい領域です（通常は静的なファイルを要求するため）。

注意点を一つ。拡大鏡はディスプレイに実際にレンダリングされたピクセルをサンプリングするため、OS が適用した GPU コンポジット、カラープロファイル、HDR から SDR へのトーンマッピングなどはすべて焼き込まれています。取得される色は「ユーザーが実際に見ている色」であって、「ソース素材が指定した色」ではありません。

アクセシビリティ監査

色を 1 つ取得したら、次は別の色とのコントラスト比を確認したくなるはずです。前景色をピック、背景色をピックし、両方を Color Contrast Checker に貼り付ければ、WCAG AA/AAA の判定が得られます。色覚特性の監査が必要であれば、取得した色を Color Blindness Simulator に通して、第二色覚異常や第一色覚異常の閲覧者がパレットをどう知覚するかを確認できます。

制約と回避策

Safari と Firefox ユーザー。EyeDropper の機能検出は false を返します。ツールは「画面から取得」ボタンを非表示にし、ネイティブピッカーへフォールバックします。これらのブラウザで画面からサンプリングするには、参照画像を一時的に Chrome で開く、システムユーティリティを使う（macOS には Digital Color Meter が標準で同梱、Windows の PowerToys には Color Picker が含まれます）、または検証済みの拡張機能をインストールする、という選択肢があります。

DevTools にもスポイトはある。Chrome と Firefox の DevTools には、Styles パネル内に小さなピッカーが用意されています。ルールペインの色スウォッチをクリックすると、現在のドキュメント向けのスポイトが起動します。ただしこのピッカーの対象は検査中のページに限定されます。ビューポート内のピクセルのみで、他のタブやアプリには届きません。スタンドアロンの EyeDropper API は、物理画面全体をカバーします。

連続サンプリング不可。ピックのたびにボタンを新規クリックする必要があります。50 色なら 100 クリック。これはツールの制限ではなく、ユーザージェスチャー要件によるものです。

P3 と HDR のクランプ。広色域ディスプレイで P3 画像を表示している場合、取得される色はコードに届く前に sRGB へガマットマッピングされます。同じピクセルに対する Photoshop の読み値とは数パーセント異なる場合があります。Photoshop はソース素材のカラースペースを読みますが、ブラウザはコンポジット後の sRGB 出力を読むためです。カラーマネジメントが必要な作業は、カラーマネジメント対応のツールで検証してください。

Recent Colors は localStorage に保存される。ブラウザのサイトデータを消去するとストリップも消えます。マシンローカルで保持され、同期はされません。

FAQ

Chrome DevTools 内蔵のスポイトと何が違うのか

DevTools のピッカーは検査中のドキュメントに紐づいています。ビューポート内のピクセルのみで、他のタブやアプリには届きません。EyeDropper Web API は物理画面全体に届きます。ブラウザが OS にシステムレベルのサンプルを要求するためです。現在のページの要素を検査しているときは DevTools を、それ以外の場面ではスタンドアロンツールを使い分けてください。

なぜ複数ピクセルを一度に取得したり、領域を読んだりできないのか

1 ピクセル単位、ユーザージェスチャーごとに 1 回というのは、この API のプライバシー設計です。領域の読み取り、あるいは明示的なクリックなしでページがサンプリングできる仕組みがあれば、悪意あるページがユーザーの開いている他アプリをスクリーンショット撮影できてしまいます。WICG の脅威モデルは、「ジェスチャーごとに 1 ピクセル」を防衛可能な最大の露出と位置付けています。

Safari と Firefox ユーザーはどうすればよいか

選択肢は 2 つあります。同じツールが提供するネイティブの input type="color" ピッカーは、すべてのブラウザで新規の色作成をカバーします。実際の画面サンプリングについては、プラットフォーム標準のユーティリティ（macOS の Digital Color Meter は標準搭載、Windows の PowerToys には Color Picker が含まれます）、または信頼できる拡張機能を使ってください。これらのエンジン向けに、画面サンプリングの Web 標準フォールバックは存在しません。

P3 ディスプレイで Photoshop と異なる値が出るのはなぜか

Photoshop はカラーマネジメントパイプラインを通じて、ドキュメントの ICC プロファイルを使いソース素材の値を読みます。一方、ブラウザのスポイトは OS がディスプレイへ送り出したコンポジット後の sRGB ピクセルを読みます。P3 モニターで P3 素材を表示している場合、両者の数値は一致しません。Photoshop は広色域のオリジナルを見ており、ブラウザは sRGB マッピング後の出力を見ているからです。どちらもそれぞれのワークフローにおいて正しい値です。カラーマネジメントが必要な作業はカラーマネジメント対応のエディタで行い、sRGB ターゲットへ出力する UI 作業ではブラウザの値で問題ありません。

セカンドモニターでも動作するのか

動作します。システム拡大鏡は接続されたすべてのディスプレイをまたいでカーソルに追従します。各ディスプレイのカラープロファイルとガンマがサンプリング前に適用されるため、論理的に同じ色でも、キャリブレーションが異なる 2 台のモニターから取得すると HEX 値がわずかに変わる場合があります。

Recent Colors はブラウザやデバイス間で同期されるか

されません。ストリップは現在のオリジン向けの localStorage に保存されます。ブラウザごと、プロファイルごと、デバイスごとに独立しています。サイトデータを消去すると削除されます。アカウントもアップロードもクロスデバイス同期もありません。

iframe や Chrome 拡張機能から API を使えるか

同一オリジンの iframe からは利用可能です。クリックハンドラが iframe 内にあり、親が許可していることが条件です。クロスオリジンの iframe からは、親側の Permissions Policy ディレクティブが必要です。Chrome 拡張機能のコンテンツスクリプトからも利用できますが、画面サンプリングを行う拡張機能の多くは領域読み取りのために chrome.tabs.captureVisibleTab を使っています。