画面の色をスポイトで取得（スクリーンカラーピッカー）

ブラウザのスポイト（EyeDropper API）で、画面上の任意の場所の色をそのままHEX・RGB・HSLで取り出せます。他のウィンドウやデスクトップの色も対象です。スポイトに対応しないブラウザ（Firefox・Safariなど）では、画像を読み込んでクリックした位置の色を取得する方式に切り替えて使えます。実物の色をカメラで確認したいときはカメラ映像からカラーコード抽出、形式変換はカラーコード変換をご利用ください。

🔒 ブラウザ内で完結・入力データはサーバーに送信されません

押すとスポイトが起動します。取りたい場所をクリックすると色が確定し、Escでキャンセルできます。

画像から色を取得

画像を読み込む

画像ファイルを選ぶか、ここにドラッグ＆ドロップします。表示された画像をクリックすると、その位置の色を取得します。

取得した色

色を取得すると、ここにHEX・RGB・HSLが表示されます。

使い方

「画面から色を取得」を押すとスポイトが起動します（対応ブラウザのみ）。
画面上で色を取りたい場所をクリックすると、「取得した色」にHEX・RGB・HSLが表示されます。
非対応ブラウザでは「画像を読み込む」で画像を選び、画像上の取りたい位置をクリックします。
各形式の「コピー」を押してコピーします。過去に取得した色は「履歴」から呼び出せます。

注意点

スポイト（EyeDropper API）は主にChrome・Edgeなど Chromium 系ブラウザで利用でき、Firefox・Safariでは使えません。HTTPS接続が必要です。
画面上の色はディスプレイのカラープロファイルや夜間モードなどの影響を受ける場合があります。画像方式は画像データそのものの色を読みます。
履歴はこのページを開いている間だけメモリ上に保持され、保存も送信もされません（最大30件）。ページを閉じるか再読み込みすると消えます。
実物の色をカメラで調べたい場合は、兄弟ツールのカメラ映像からカラーコード抽出が向いています。このツールは画面上・画像上の色が対象です。

用語解説

EyeDropper API

ブラウザから画面上の任意の位置の色を取得するための仕組みです。ユーザーが操作して選んだ1色だけが返され、画面の内容が勝手に読まれることはありません。

HSL

色相（0〜360度）・彩度・明度で色を表す形式です。同系色で少し明るくするなど、調整が直感的にできます。

よくある質問

FirefoxやSafariで画面の色を取得できないのはなぜですか？

画面スポイトに使うEyeDropper APIは、現在主にChrome・EdgeなどChromium系ブラウザだけが対応しています。非対応ブラウザでは、画像を読み込んでクリックした位置の色を取る方式に自動で切り替わります。

スポイトで他のウィンドウやデスクトップの色も取れますか？

はい。対応ブラウザでは、ブラウザの外（他のアプリのウィンドウやデスクトップ）も含めて、画面上の任意の位置を選べます。選んだ1画素の色だけが返され、画面全体が読み取られることはありません。

画像方式で取れる色は、画面で見える色と違うことがありますか？

画像方式はファイルに保存されたピクセルの値を読むため、ディスプレイのカラープロファイルや夜間モードの影響は受けません。逆に、画面スポイトは表示された色を取るので、プロファイルによって画像データとわずかにずれることがあります。

履歴はどこに保存されますか？

履歴はこのページを開いている間だけメモリ上に保持される最大30件で、ブラウザへの保存も送信もしません。ページを閉じるか再読み込みすると消えます。

このページをシェア

X f LINE Threads Bluesky Reddit B!