スポイト カラーピッカー（画像・画面）

画面・画像・貼り付けたスクリーンショットからスポイトで色を取得。ルーペで 1 ピクセル単位に指定でき、同じ色に戻せる HEX・RGB・HSL・OKLCH・Display P3 を出力します。

  • ブラウザ内で処理
  • データはブラウザ外に出ません
  • 無料 · 登録不要
ボタンで画面のスポイトを開き、任意のウィンドウの 1 ピクセルを選びます。Esc でキャンセル。EyeDropper API は sRGB の色を返し、ブラウザにこの API がある場合だけボタンを表示します。 画像を開く・ドロップするか、Ctrl+V / ⌘V でスクリーンショットを貼り付けます。対応形式はブラウザ次第です。16,777,216 ピクセルを超える画像は縮小して取得し、処理サイズを画像の横に表示します。 システムのカラーパネルを開きます。色を動かすと各欄が更新され、変更を確定すると最近の色に追加します。 色の欄を空にし、画像を閉じます。読み込み中の画像と画面からの取得もキャンセルします。保存済みの色を消すには最近の色の横のクリアを使います。

「画面から取得」を押してから、どのウィンドウでも好きなピクセルをクリックします。Esc でキャンセル。

どの欄にも HEX、rgb()、hsl()、oklch()、color(display-p3 …)、CSS の色名を入力・貼り付けできます。有効な色を読み取るとほかの形式も更新し、透明度を保ちます。色として読めない間はほかの欄を空にしてコピーを止め、どこが違うかを状態行に表示します。
形式の横のコピーはその欄をテキストとしてコピーします。最近の色のすべてコピーは HEX を 1 行に 1 つずつコピーします。

画像をここにドロップ、またはスクリーンショットを貼り付け Ctrl+V / ⌘V でクリップボードから貼り付け。PNG・JPEG・WebP・GIF・SVG など、ブラウザで表示できる形式に対応。
最近の色 直近 16 件の異なる HEX 色を保存します。色見本を押すと再適用し、一覧の横のクリアで保存色を消します。文字入力だけでは履歴に追加しません。

取得した色がここに並びます。

直近 16 件の色とサンプルの大きさをこのブラウザ（localStorage）に保存します。画像は保存しません。

詳しいガイドを読む EyeDropper API で画面上の任意のピクセルを取得する
例・詳しい説明・よくある質問 実際の出力つきの例、ほかのツールとの違い、よくある質問。

Mac でスクリーンショットから取得する

Safari と Firefox には EyeDropper API がないため、スクリーンショット経由が基本です。macOS ではショートカットに control を足すと、ファイルではなくクリップボードに保存されます（例：control + shift + command + 4、Apple サポート）。そのまま本ページで ⌘V を押せば画像が入ります。画面の色をその場で数値で見たいだけなら、macOS 付属の Digital Color Meter も使えます。

例：デジタル庁デザインシステムの色を確かめる

デジタル庁デザインシステムのデザイントークン（npm パッケージ @digital-go-jp/design-tokens 2.0.1）では、--color-primitive-blue-900 が #0017c1、フォーカスリングに使う --color-primitive-yellow-300 が #ffd43d です。このシステムで作ったサイトのボタンをスクリーンショットから取得して #0017c1 が出れば、トークンどおりに実装されています。フォーカスインジケーターは Yellow-300 と黒の二重構造（同ページ「フォーカスカラー」）なので、ルーペで黄色の線の上に中央の枠を合わせて取得すると rgb(255, 212, 61) になります。

同じ Blue-900 は HSL で hsl(232.8, 100%, 37.8%)、OKLCH で oklch(38% 0.245 264.2) です。HSL を整数にした hsl(233, 100%, 38%) は #0017c2 で、青が 1 ずれます。このツールはどの欄も同じ HEX に戻る値を出します。テストでは、sRGB 立方体を 3 刻みで回した 636,056 色をツール自身のパーサーで、ランダムな 30,000 色を culori で読み戻し、すべて一致しました。

例：1 ピクセルの縞模様と半透明ピクセル

2000 × 400 ピクセルで、赤 #ff0000 と青 #0000ff が 1 ピクセルずつ交互に並ぶテスト画像を使います。原寸の画素を読むので、1 点サンプルなら純粋な赤か青が出て、状態行に「x 1000・y 200」のように座標が出ます。3 × 3 の平均は rgb(85, 0, 170)（赤 1 列と青 2 列）です。写真やグラデーションでは平均のほうが安定します。

PNG の #1a73e8・alpha 10/255 のピクセルは、Chromium の canvas から #1a80e60a として読み戻されました。透明に近いほど RGB の精度が落ちるので、ツールは alpha を表示し、注意書きを添えます。

どの色空間の値か

  • 画面：EyeDropper API は sRGB の 16 進文字列を返します（MDN）。macOS 版 Chromium は取得したディスプレイの色を sRGB に変換してから 8 ビットに丸めます（skia_utils_mac.mm の CGColorRefToSkColor）。広色域ディスプレイ上の sRGB 外の色は切り詰められます。
  • 画像：sRGB の canvas に描いて読み取ります。CSS Color 4 は、埋め込みのカラープロファイルを反映して表示すること（§3.4）と、プロファイルのない画像を sRGB として扱うこと（§3.5）を定めています。Display P3 の canvas を作れるブラウザ（Chrome・Edge 92 以降、Safari 15.2 以降。Firefox は非対応）では P3 でも読み取り、sRGB の外なら注意を出して P3 の値を残します。
  • 変換式は CSS Color 4 のサンプルコード どおりで、テストで colorjs.io と 10⁻⁹ 以内で一致することを確認しています。

ほかのツールとの違い

2026-10-01 にデスクトップ版 Chromium で同じファイルを使って確認しました。ラッコツールズの画像カラーピッカーは原寸で読み取るため縞模様でも正しい色が出ますが、半透明ピクセルは alpha を出さず #1A80E6 と表示します。imagecolorpicker.com は縞模様の画像を 529 × 105 に縮小して読み取り、どこをクリックしても画像にない #7f007f を返しました。取得した 2 色のコントラスト比はカラーコントラストチェッカーで、画像全体の配色は画像カラーパレット抽出で確認できます。

制限

  • 16,777,216 ピクセルを超える画像は縮小してから読み取ります。iOS の canvas は 4,096 × 4,096 までのためです（MDN）。縮小後のサイズと、1 ピクセルが元の何ピクセルの平均かを表示します。
  • 画面からの取得は毎回クリックが必要です。ユーザー操作なしの open() は NotAllowedError で拒否され、1 回で 1 ピクセルだけを取得します。
  • 開ける画像形式はブラウザ次第で、HEIC は Safari でのみ開けます。Windows なら PowerToys のカラーピッカー（Win + Shift + C）も画面から取得できます。
  • 出力は HEX・RGB・HSL・OKLCH・Display P3 です。CMYK・Lab・HSV が必要なら、HEX をカラーコンバーターに貼り付けてください。

FAQ

Firefox・Safari・スマートフォンで「画面から取得」が表示されないのはなぜですか？

画面からの取得は EyeDropper API を使います。提供しているのはデスクトップ版の Chrome・Edge（95 以降）と Opera（81 以降）だけで、Linux の Wayland 環境でも使えません。ほかのブラウザではボタンを隠し、「画像を開く」を主ボタンにします。スクリーンショットを撮って Ctrl+V / ⌘V で貼り付け、ピクセルをクリックしてください。

Photoshop や Figma の値と一致しますか？

タグのない画像や sRGB の画像なら一致します。ツールはブラウザが sRGB で描画したピクセルを読み取るためです。広色域の画像はブラウザが sRGB に変換するので、HEX・RGB・HSL が切り詰められることがあります。その場合は注意を表示し、OKLCH と Display P3 の欄に本来の色を残します。

HSL に小数が付くのはなぜですか？

整数に丸めた HSL は、多くの場合別の色に戻ります。デジタル庁デザインシステムの Blue-900（#0017c1）を hsl(233, 100%, 38%) と書くと #0017c2 になります。ツールは同じ HEX に戻る最小の桁数で書き出します。

画像はアップロード・保存されますか？

されません。画像はお使いの端末の canvas で読み取るだけです。このブラウザの localStorage に保存するのは、直近 16 件の HEX とサンプルの大きさ（1 点・3 × 3・5 × 5）の 2 つです。色は「最近の色」の「クリア」で消せます。

透過 PNG のピクセルも取得できますか？

できます。alpha を表示し、#1a80e60a のように透明度付きの HEX を出力します。canvas は色を alpha で乗算して保存するため、ほぼ透明なピクセルの RGB は近似値です。完全に透明なピクセルには色がないので、その旨を表示します。

関連ツール

カラーコンバーター HEX・RGB・HSL形式間のカラー変換。ライブプレビュー付き。 カラーコントラストチェッカー 任意の前景色と背景色の WCAG コントラスト比をチェック。本文・大きな文字・UI コンポーネントごとに AA/AAA 合否を表示。不足時は「色相を保ったまま明度を調整」する修正案をワンクリックで提示。 画像からカラーパレット抽出 画像から配色を抽出し、各色が画像に占める割合を表示。同じ画像なら毎回同じ結果、ベタ塗りの画像は元の色をそのまま取得。HEX・RGB・HSL・OKLCH のコピー、CSS・Tailwind・JSON・GIMP .gpl・Adobe .ase の書き出しに対応。 色覚シミュレーター 画像・スクリーンショット・配色を 8 種類の色覚でシミュレーション。全タイプを並べて比較し、原寸の PNG を保存、同じに見える色の組を判定します。ブラウザ内で動作し、画像はアップロードしません。 カラーシェード生成器 1 色から OKLCH で 50〜950 の 11 段階シェードを生成。ベースカラーは明度の近い段階にそのまま入り、各段階に白文字・黒文字の WCAG コントラスト比を表示。CSS 変数・Tailwind v3/v4・SCSS・JSON で書き出し。 カラーパレット作成・配色ツール 任意の CSS カラーから、HSL または OKLCH の色相環で補色・分割補色・類似色・トライアド・テトラード・スクエア・モノクロマティックの配色を作成。値のコピーや CSS 変数・SCSS・Tailwind・JSON の書き出しに対応。