スポイトツール — 画面の色を取得

画面から色を取得

「色を取得」を押して、画面上の好きなピクセルをクリック。Esc でキャンセルできます。

API の性質と正直な説明

ウィンドウの外も取得可能：EyeDropper API はデスクトップや他のアプリを含め、画面上のあらゆるピクセルをサンプリングできます。
渡るのは 1 ピクセルだけ：ブラウザが渡すのは選んだピクセルの sRGB カラーのみで、範囲や座標は含まれません。
画面キャプチャなし：このページがスクリーンショットや映像ストリームを受け取ることは一切ありません。

カラー形式

色を取得するか貼り付けると、各形式が表示されます。

スウォッチ履歴

0/48

まだスウォッチがありません。上で色を取得するか貼り付けてパレットを作りましょう。

WCAG コントラスト比

WCAG のコントラストは不透明色に対して定義されているため、計算ではアルファチャンネルを無視します。

上の履歴からカラー A とカラー B を選ぶと、コントラストを計算します。

スウォッチの書き出し

ブラウザ判定

画面からの色取得は標準の EyeDropper API に依存します。静的な互換表より、このページのリアルタイム判定を信頼してください。

EyeDropper API 確認中…

このツールについて

ブラウザ標準の 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() の値（カンマ区切り・スペース区切りのどちらでも可）を貼り付ければ、形式変換・コントラスト計算・書き出しはすべてそのまま使えます。

よくある質問

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

「色を取得」ボタンを押すと、ブラウザ標準の拡大ルーペ付きスポイトが開きます。画面上の好きなピクセル（ブラウザの外でも可）にルーペを合わせてクリックすれば色を取得できます。やめたいときは 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 だけで行われます。サーバーには何も送信されません。