画像から色を抽出
スポイトツール
画像の好きな場所をクリック・タップするだけ。
選んだ場所のカラーコードをコピーできます。
画像を選択する
ドラッグ＆ドロップ、またはクリック
JPG / PNG / HEIC / WebP
画像を準備中...
画像の上をクリックまたはタップしてください
📝 このツールの詳しい使い方
画像を選択
「画像を選択する」エリアをクリックするか、お手持ちの画像ファイルを直接ドラッグ＆ドロップしてください。スマホならカメラロールから選ぶだけです。
抽出したい場所をタップ
表示された画像の中で、色を調べたいポイントをピンポイントでクリック（タップ）します。その場所の色がプレビューに反映されます。
コードをコピー
HEX値（#FFFFFF形式）やRGB値が表示されます。横のコピーボタンを押すだけでクリップボードに保存され、そのままデザインツール等へ貼り付け可能です。
✨ こんな方におすすめ
- ✔ 外出中にスマホで見たサイトや写真の配色をメモしておきたいWebデザイナーの方
- ✔ イラスト制作の資料から、配色の参考になる色を調べたい方
- ✔ 資料作成でロゴやブランドカラーと色を統一させたいビジネスマンの方
- ✔ 専用ソフトを立ち上げるほどではないが、サクッと色コードを知りたいエンジニアの方
🧠 知ってた？スポイトの豆知識
デザインソフトで定番の「スポイト」ツール。英語では「Eyedropper（アイドロッパー）」と呼ばれます。このツールで取得できる色はあくまで「画面上での見え方」です。ディスプレイの設定や画像圧縮によって、本来の色とは微妙に異なる数値になることがあるため、最終的な調整は自分の目で行うのがプロのコツです。
プライバシーと安全性について
当ツールはユーザーのプライバシーを最優先に設計されています。選択した画像データはすべてお客様のブラウザ内でローカルに処理されます。外部サーバーへ画像が送信・保存されることは一切ありません。機密性の高いデザイン素材やプライベートな写真でも、安心してお使いいただけます。
入力・出力のポイント
写真を選び、色を知りたい場所をクリックまたはタップします。
- 表示結果
- 出力は色見本と HEX・RGB のテキストです。
仕上がりの確認：長辺2000px以下の縮小やJPEG化の影響があり、元ファイルの画素と同一とは限りません。境界の近くは数回タップして違いを比べます。
入力形式と保存の手順
入力：JPG・PNG・WebP、HEIC/HEIF（変換して読み込み）。形式や端末によって読み込めない場合は、JPGまたはPNGで試してください。
写真をタップして色を選び、HEX・RGBのコピーボタンで取り出します。コピーできない場合は出力欄の文字を選択してください。
仕上がりの例
猫の写真で選んだ位置から、色コードを取り出した表示例です。
❓ よくある質問
Q. 対応している画像形式は何ですか？ ▼
A. 一般的なJPG、PNG、WebPに加え、iPhoneで標準的なHEIC形式にも対応しています。幅広いデバイスで撮影した画像をそのままお使いいただけます。
Q. 画像がうまく読み込まれない場合は？ ▼
A. ファイルが破損していないか、またはブラウザが最新の状態かご確認ください。また、非常に大容量の画像（数十MB以上）の場合、メモリ不足で処理が止まる可能性があるため、リサイズ後のアップロードを推奨します。
Q. 抽出される色の精度はどのくらいですか？ ▼
A. 読み込んだ処理画像の、タップした位置の1画素を取得します。大きな画像は縮小やJPEG化を通るため、元ファイルのRGB値と異なる場合があります。境界や細い模様では近くの点も選んで違いを確認してください。
Q. 料金はかかりますか？ ▼
A. 完全に無料です。会員登録などの必要もありません。広告収入によって運営を維持しておりますので、安心してご利用ください。
このツールの裏側・仕組み
技術的な仕組みや、安全に処理を行うための工夫などを解説しています。
いつも ツール をご利用いただきありがとうございます🐾