拡大鏡の倍率
画像

画像の上を動かし、クリックで色を採取

カーソル位置の色
採取した色

色をクリックで HEX をコピー

画像をここにドロップ

クリックして選択 · または貼り付け (Ctrl/Cmd + V)

ブラウザ内で処理 · アップロードなし

写真・スクリーンショット・イラスト・デザインカンプから「この部分の色」をスポイトで正確に取り出すツールです。画像を読み込み、見たい場所にカーソルを合わせると、カーソル追従の拡大鏡(ルーペ)が周辺のピクセルを最近傍でブロック拡大して表示し、中央の十字でちょうど1ピクセルを狙えます。その位置の色はリアルタイムで HEX(#RRGGBB)・RGB(rgb(r, g, b))・HSL(hsl(h, s%, l%))の3表記で表示され、各行をクリックすればその表記をクリップボードへコピーできます。画像をクリックすると、その色を「採取した色」としてパレットに追加していけるので、配色の参考に何色も拾ってまとめて使えます。採取した色見本はクリックで HEX をコピー、まとめてクリアも可能です。色は表示用に縮小した画像からではなく、読み込んだ画像の実寸ピクセルから直接読み取るため、画面上で小さく表示されていても1ピクセル単位の正確な色が得られます。拡大鏡の倍率はスライダーで調整でき、細かいドット絵やアンチエイリアスの境界でも狙った1点を拾えます。ブラウザ標準の EyeDropper API と違い、画面全体ではなく読み込んだ画像内に対象を絞り、対応していないブラウザでも同じ操作で使えます。あなたの画像は作品や資料そのものなので、本ツールはどこにもアップロードせず、読み込みから色の取得・コピーまですべて端末内(ブラウザ)で完結します。

使い方

  1. 色を調べたい画像をドロップ(またはクリックで選択・Ctrl/Cmd+V で貼り付け)します。
  2. 画像の上でカーソルを動かすと拡大鏡が出ます。中央の十字で1ピクセルを狙い、HEX / RGB / HSL を確認します。
  3. 値の行をクリックしてコピー、または画像をクリックして色をパレットに採取します。採取した色見本もクリックで HEX をコピーできます。

よくある質問

画像はサーバーにアップロードされますか?

いいえ。画像の読み込み・色の取得・コピーはすべてブラウザ内で行われ、どこにもアップロード・保存・送信されません。あなたの端末内だけで処理されます。

拡大鏡(ルーペ)は何のためにありますか?

狙った1ピクセルを正確に拾うためです。カーソル周辺のピクセルを拡大して表示し、中央の十字がいま色を読んでいるピクセルを示します。細かい模様やアンチエイリアスの境界でも、隣の色と取り違えずに目的の色を選べます。倍率はスライダーで調整できます。

表示が小さくても正確な色が取れますか?

はい。色は画面表示用に縮小した見た目からではなく、読み込んだ画像の実寸ピクセルから直接読み取ります。そのため画面上で小さく表示されていても、1ピクセル単位の正確な色が得られます(非常に大きな画像はメモリ保護のため内部で上限まで縮小しますが、通常の写真は実寸のまま扱います)。

HEX・RGB・HSL のどれをコピーできますか?

3つすべてコピーできます。カーソル位置の色は HEX(#RRGGBB)・RGB(rgb(r, g, b))・HSL(hsl(h, s%, l%))で表示され、各行をクリックするとその表記がクリップボードにコピーされます。CSS やデザインツールにそのまま貼り付けられます。

複数の色をまとめて拾えますか?

はい。画像をクリックするたびに、その色が「採取した色」のパレットに追加されていきます。配色の参考に何色も拾って並べ、それぞれをクリックで HEX コピーできます。「クリア」で採取した色をまとめて消せます。

ブラウザのスポイト機能(EyeDropper)と何が違いますか?

ブラウザ標準の EyeDropper は画面全体を対象にしますが、本ツールは読み込んだ画像内だけを対象にし、拡大鏡で1ピクセルを狙えます。EyeDropper 非対応のブラウザでも同じ操作で使え、画像はアップロードされません。