画面カラーピッカー (EyeDropper) & スポイトツール

Q: 取得できるカラー形式は何がありますか？

Web制作で最も一般的な HEX（#FFFFFF） 、 RGB（rgb(255,255,255)） 、および HSL 値を瞬時にクリップボードへコピーできます。

ディスプレイ画面上のあらゆるWebサイト、画像、動画、デスクトップ領域からピクセル単位で正確に色を抽出。HEXカラーコード、RGB、HSL値を瞬時にコピーできます。

画面から色を抽出する3つのステップ

1 「スポイトを起動して色を抽出」ボタンをクリックします。

2 画面全体が拡大レンズ付きのスポイトカーソルに変わります。目的のピクセルに合わせてクリックします。

3 抽出された「HEXコード（例: #3B82F6）」「RGB値」「カラーパレット履歴」からワンクリックでクリップボードにコピーします。

スポイトツール使用時のトラブルとブラウザ対応状況

スポイトが起動しない、色が正しく取れない場合の解決手順:

症状・エラー内容	主な原因	対処法・解決策
ボタンを押しても「お使いのブラウザはEyeDropper APIに未対応です」と出る	EyeDropper APIはChromium系ブラウザの先進規格のため、SafariやFirefoxでは未実装。	Google Chrome、Microsoft Edge、またはOpera等の最新ブラウザでご利用ください。
抽出した色が肉眼で見ている色と微妙に異なって見える	OSの「HDR（ハイダイナミックレンジ）」設定または広色域ディスプレイ（Display P3）のカラープロファイル変換差。	SDR標準のsRGB色空間において最も近いHEXコードが抽出されています。
デスクトップや別アプリの画面からも色を取れるか	ブラウザ外のピクセルアクセス。	EyeDropper APIは画面全体のピクセルピッキングに対応しています。起動後に任意のデスクトップ領域をクリックしてください。
スポイトを起動したけれど採取せずキャンセルしたい	誤って起動した場合の操作方法。	キーボードの「Esc」キーを押すことで、色を採取せずに安全にスポイトモードを解除できます。

W3C EyeDropper API仕様とピクセルサンプリング

従来のWebサイトではセキュリティ上の制限から、画面上の任意ピクセルをサンプリングすることは不可能でした。これを解決したのが最新の EyeDropper API です。

ブラウザの外側のOSデスクトップ領域まで含め、ユーザーがクリックした単一ピクセルのsRGB色度座標をダイレクト取得。外部拡張機能（エクステンション）を一切インストールすることなく、デザイナーやWeb制作者のカラーサンプリング作業を劇的に効率化します。

技術仕様＆測定テレメトリ

HEXコード（クリックでコピー）

#2F5BD3

RGB形式

rgb(47, 91, 211)

HSL形式

hsl(224, 65%, 51%)

ツールの使い方

ステップ 1

Click 画面から色を抽出（スポイト）

カーソルが高精度な虫眼鏡ルーペへと切り替わります。

ステップ 2

抽出したいピクセルに合わせる

デスクトップ画面上の写真、デザイン、Webページ、アプリ上にカーソルを合わせます。

ステップ 3

クリックして色を取得

ピクセルを1回クリックすると色が確定し、HEX、RGB、HSLコードが自動コピーされます。

よくあるご質問（FAQ）

ブラウザの外（他のアプリやデスクトップ画面）の色も抽出できますか？

はい！対応ブラウザ（Chrome、Edge、Opera等）では、OS標準のEyeDropper APIにより、他のアプリ、壁紙、動画など画面上のあらゆるピクセルから色をスポイト抽出できます。

スポイトツールをキャンセルするには？

キーボードのESCキーを押すと、色を選択せずにスポイトツールを終了できます。

FirefoxやSafariはEyeDropper APIに対応していますか？

FirefoxやSafariは現在ネイティブEyeDropper APIに未対応です。それらの環境では自動的にインタラクティブカラーパレットが表示されます。

Webデザイン（CSS）に最適なカラーコード形式は？

一般的なWeb制作にはHEXコード（#RRGGBB）が広く用いられますが、デザインの明度・彩度調整や透過色の指定にはHSL形式が非常に便利です。

よくある質問 (FAQ)

どのブラウザでこのカラーピッカースポイトツールは使えますか？

Google Chrome（バージョン95以降）およびMicrosoft EdgeなどのChromium系最新ブラウザでネイティブサポートされています。

ブラウザの外側（デスクトップの壁紙や別アプリ）の色も取れますか？

はい、EyeDropper APIの最大の特徴は、ブラウザのウィンドウ外にあるデスクトップアイコンや別アプリのウィンドウからも色を抽出できる点です。

スポイトで画面全体のスクリーンショットが盗み見られる危険はありませんか？

危険はありません。APIの設計上、ユーザーがクリックした「たった1つの画素の色情報（HEX）」しかスクリプトに渡されないため、画面全体の情報漏洩は構造的に不可能です。

取得できるカラー形式は何がありますか？

Web制作で最も一般的な HEX（#FFFFFF）、RGB（rgb(255,255,255)）、および HSL 値を瞬時にクリップボードへコピーできます。

過去に抽出した色の履歴は残りますか？

はい、セッション中の「カラーパレット履歴」に自動蓄積されるため、複数の色を連続して採取した後にまとめて確認・コピーできます。

スマートフォンのブラウザでもスポイトは使えますか？

現在のところEyeDropper APIは主にデスクトップ環境向けに提供されており、モバイル環境ではフォールバックUIが表示されます。