# Eyedropper

> ブラウザ標準の EyeDropper API で画面のどこからでも色を取得し、HEX・RGB・HSL・OKLCH に変換。WCAG コントラスト確認とパレット書き出しに対応。すべて端末内で完結。

- URL: https://bytescope.dev/ja/eyedropper/
- Locale: ja · Also: [en](https://bytescope.dev/en/eyedropper.md) · [zh-Hant](https://bytescope.dev/zh-Hant/eyedropper.md)
- Runs: 何もアップロードされません。色の値とスウォッチ履歴はブラウザのローカルにのみ保存されます。
- Requires: Chrome, Edge or Opera on desktop (EyeDropper API). Not Firefox, Safari or mobile browsers.
- Updated: 2026-09-08

## What it does

ブラウザ標準の EyeDropper API を使って、デスクトップや他のウィンドウ、別のサイトからでも色を直接取得できます。ソフトのインストールは不要です。取得したスウォッチは hex・rgb・hsl・oklch の各形式へリアルタイムに変換されるので、CSS やデザイントークン、グラフィックツールへそのままコピーできます。

### ブラウザの外からも色を取れる

アップロードした画像の中でしか色を選べないキャンバス型のカラーピッカーとは違い、このツールは対応する Chromium ブラウザで OS ネイティブの拡大ルーペを呼び出します。コードエディタや壁紙、デザインカンプ、別のモニターなど、画面に見えているピクセルならどこでもサンプリングでき、正確な sRGB の色が得られます。

### プライバシー設計：渡るのは 1 ピクセルの色だけ

画面の内容が外に出ることはありません。スポイトを起動しても、ブラウザがページに渡すのはクリックした 1 ピクセルの hex 文字列だけです。スクリーンショットも録画も映像ストリームもカーソル座標も、ページ側は一切受け取りません。`Esc` で取得をやめた場合も、画面のデータを読まずに静かに終了します。

### WCAG コントラスト確認とパレット書き出し

取得した色は最大 48 個までブラウザのローカルに履歴として保存されます。任意の 2 色を前景と背景に割り当てると WCAG 2.1 のコントラスト比を計算し、通常の文字と大きな文字それぞれで AA・AAA を満たすか確認できます。なお WCAG のコントラスト式は不透明色を前提としているため、アルファは無視されます。パレットは CSS カスタムプロパティ、GIMP パレット（`.gpl`）、JSON、HEX リストとしていつでも書き出せます。

### 非対応ブラウザでも手動入力で使える

`EyeDropper` API に対応しているのは現在、Chrome・Edge・Opera などデスクトップ版の Chromium ブラウザだけです。Firefox や Safari、モバイルブラウザでは自動的に手動入力へ切り替わります。hex コードや `rgb()` / `rgba()` の値（カンマ区切り・スペース区切りのどちらでも可）を貼り付ければ、形式変換・コントラスト計算・書き出しはすべてそのまま使えます。

## Limits

Does not pick colours from images you upload (use image tools for that); it samples the live screen, including outside the browser window.

## FAQ

### 画面から色を取るにはどうすればいいですか？

「色を取得」ボタンを押すと、ブラウザ標準の拡大ルーペ付きスポイトが開きます。画面上の好きなピクセル（ブラウザの外でも可）にルーペを合わせてクリックすれば色を取得できます。やめたいときは `Esc` を押してください。エラーにはならず、静かに閉じるだけです。

### このサイトに画面が見られたり録画されたりしませんか？

されません。標準の EyeDropper API が返すのは、クリックしたピクセルの sRGB カラーコード 1 つだけです。スクリーンショットや映像ストリーム、画像バッファ、座標がページに渡ることはなく、画面の内容は非公開のままです。

### Firefox や Safari でスポイトのボタンが押せないのはなぜですか？

`EyeDropper` API を実装しているのは現在、デスクトップ版の Chromium 系ブラウザ（Chrome・Edge・Brave・Opera）だけで、Firefox と Safari は未対応です。それでもカラーコードを手動で貼り付ければ、形式変換・WCAG コントラスト確認・パレット書き出しは利用できます。

### WCAG コントラスト計算では透明度はどう扱われますか？

WCAG 2.1 の相対輝度の式は、不透明な色同士を前提に定義されています。そのためコントラスト比の計算ではアルファチャンネルを無視し、すべて完全な不透明色として評価します。

### パレットはどの形式で書き出せますか？

CSS カスタムプロパティ（`--swatch-1: #hex`）、GIMP パレットファイル（`.gpl`、GIMP と Inkscape で利用可）、hex 文字列と 0〜255 の生のチャンネル値を持つ JSON 配列、そして HEX 値のプレーンなリストの 4 種類です。

### スウォッチがサーバーに送られたり保存されたりしますか？

いいえ。色変換もコントラスト計算も履歴の保存も、すべてブラウザ内の JavaScript と `localStorage` だけで行われます。サーバーには何も送信されません。

## Related tools

- [Image Inspector](https://bytescope.dev/ja/image-inspector.md) — 拡大ルーペで色の取得、ピクセル座標の確認、画像の分析ができます。
- [Redact Screenshot](https://bytescope.dev/ja/redact-screenshot.md) — スクリーンショットの文字を黒塗りし、名前をぼかし、顔をモザイク化して秘密を隠せます。