画像スポイト
画像をここにドラッグ＆ドロップ
対応フォーマット: JPG, PNG, WebP, GIF画像上の任意の場所をクリックして色を選択
ロゴや写真、スクリーンショットに使われている色を知りたいことはありませんか。画像をアップロードして知りたい場所にマウスを合わせ、クリックするだけです。色のコードは選んだ形式（HEX、RGB、HSL、HSV、LCH）でそのままクリップボードにコピーされます。インストールは不要で、画像がパソコンの外に送られることもありません。
画像から色を調べる手順
- 画像をアップロードする。 ウィンドウにドラッグ＆ドロップするか、「ファイルを参照」をクリックします。JPG、PNG、WebP、GIFに対応しています。
- 形式を選ぶ。 画像の上でコピーしたい色の書き方を選びます。ウェブ用ならHEX、グラフィックソフト用ならRGBが便利です。選んだ形式はツールが記憶します。
- 色にカーソルを合わせる。 カーソルのそばにルーペが表示され、周囲のピクセルが拡大されたうえで色のコードが下に出ます。
- クリックする。 コードがクリップボードにコピーされ、色は「選択した色」タブに保存されます。あとは必要な場所に貼り付けるだけです。
別の画像を試したいときは、今の画像の上に新しい画像をドラッグするか、ゴミ箱アイコンで削除してください。
この画像スポイトでできること
1ピクセルまで見えるルーペ
普通のスポイトはカーソルの真下の色しか教えてくれないので、文字の細い輪郭を正確に狙うのは運任せになりがちです。このルーペはカーソル周辺を11×11ピクセルに拡大し、中央のピクセルを枠で囲みます。クリックする前に、どのピクセルを選んでいるかがはっきり見えます。
1ピクセル単位までズーム
プラス・マイナスのボタン、またはCtrlを押しながらのマウスホイールで、画像を最大64倍まで拡大できます。グリッドをオンにするとピクセルの境界線が見えるので、アイコンやドット絵、小さな文字でも狙った場所を正確にクリックできます。
縮小版ではなく元の画像から色を取得
多くのオンラインツールは画像を先に縮小してからプレビューの色を読み取るため、隣り合うピクセルの色が混ざってしまいます。このツールは画像を長辺最大4096pxのフル解像度のまま扱うので、実際のピクセルの色がそのまま得られます。
クリック1回でコピー完了
テキストを選択したり数字を打ち直したりする必要はありません。画像をクリックするたびに、選んだ形式でコードがコピーされます。同じ色を別の表記でも使いたいときは、色の詳細に5つの形式すべてが並び、それぞれにコピー用のボタンが付いています。
主要色パレット
画像を読み込むと、すぐに最大8色の主要色を見つけて「主要色」タブに表示します。ほとんど同じ色味はまとめられるので、グレーの微妙な違いが何個も並ぶことはありません。PNGの透明部分も対象外です。ウェブサイトやプレゼン資料、SNS投稿の配色の土台として使えます。色相なしでも十分なコントラストがあるか確かめたいときは、画像をグレースケールに変換すると一目でわかります。
選択した色をいつでも確認
クリックした色はすべて「選択した色」タブに保存されます（直近24色）。画像の複数の場所を見比べたり、あとで見直したりできます。画面が広いときは、色のパネルが画像のすぐ横に表示されます。
画像から色コードを調べる場面
- ウェブサイトやアプリ制作: クライアントからロゴがJPGでしか届かず、CSSに正確なブランドカラーを入れたいとき。背景を透明にしたバージョンも必要なら、画像の背景を消すツールも使えます。
- グラフィックやSNS投稿: 投稿のテキストを写真の色に合わせたいとき。写真から直接色を取ればぴったり合います。
- プレゼン資料や書類: 会社のロゴの色をPowerPointやGoogleスライド、Canvaに設定するとき、HEXやRGBの値をそのまま入力できます。
- デザインの確認: スクリーンショットで、アプリのボタンが本当に指定どおりの色になっているか確認するとき。書き出した画像のサイズも画像サイズの一括分析で調べられます。
- インテリアやファッション: 布地や壁の写真から近い色味を探しているとき。コードは色見本を選ぶときの目安になります。
画像スポイトが返す色の形式
- HEX（
#1373b6）: HTMLやCSS、ほとんどのグラフィックツールで使われる表記です。 - RGB（
rgb(19, 115, 182)）: 赤・緑・青それぞれの割合を0〜255で表します。光を混ぜ合わせる仕組みはWikipediaで解説されています。 - HSL（
hsl(205, 81%, 39%)）: 色相・彩度・輝度で表します。明るいバリエーションや暗いバリエーションを作りやすい形式です。 - HSV: 色相・彩度・明度で表す形式で、PhotoshopやGIMPの色選択でおなじみです。HSLとHSVの違いはWikipediaに詳しく載っています。
- LCH: 人の目が色をどう感じるかに沿ったモデルです。コピーされる書き方は現行のCSSがそのまま解釈できます（MDNのドキュメント参照）。
このツールは画像から色を調べるためのものです。その色をさらに編集したり、他の形式に変換したり、相性の良い色を探したいときは、カラーホイールに進んでください。
よくある質問
アップロードした画像はサーバーに送られますか？
いいえ。画像はお使いのブラウザ内だけで読み込まれて処理され、どこにも送信されません。ページを閉じれば何も残りません。社内資料や未公開のデザインにも安心して使えます。写真からHEXコードを調べるにはどうすればいいですか？
写真をアップロードし、画像の上でHEXが選ばれた状態のまま、知りたい色の場所をクリックしてください。#75dab2のようなコードがすぐにクリップボードにコピーされます。
写真から取った色が実物と違って見えるのはなぜですか？
カメラは照明やホワイトバランス、圧縮の影響で色が変わります。このツールはファイルに保存されている色をそのまま返します。写真の場合は数か所をクリックして「選択した色」タブで見比べてみてください。壁の塗料などをこの値で調合する場合は、あくまで目安として扱ってください。スマートフォンでも使えますか？
はい。タッチ画面で画像の場所をタップすると、パソコンと同じようにコードがコピーされます。ルーペはスマートフォンでは表示されないので、細かい部分を選ぶときは先に画像を拡大してください。HEXとRGBの違いは何ですか？
どちらも同じ色を表しています。RGBは0〜255の3つの数字で表し、HEXは同じ数字を#の後に16進数で表記したものです。例えばrgb(255, 87, 51)と#ff5733は同じ色です。