画像 カラーコード 抽出
画像の上をクリックすると、その画素のカラーコードをHEX・RGB・HSLで表示します。動かしている間は拡大鏡が出るので、1画素だけを狙えます。あわせてよく使われている主要色8色と、それぞれが全体の何%かも自動で出します。処理はすべてこの端末のブラウザ内で完結し、画像はどこにも送信されません。
画像から色を抽出してカラーコードを調べる手順（スポイト）
- 色を調べたい画像（スクリーンショットでも可）をドロップします。
- 画像の上にカーソルを乗せると拡大鏡が出るので、1画素を狙ってクリックします。HEX・RGB・HSLのカラーコードが表示されます。
- 画像全体でよく使われている主要色8色と、それぞれの割合も自動で出ます。参考サイトの配色を拾いたいときは、ここから見るのが早いです。
この道具の要点
| 対応形式 | JPG・PNG・WEBP |
|---|---|
| 料金 | 無料・回数の制限なし |
| ファイルの扱い | この端末のブラウザ内だけで処理。サーバーに送信しない（アップロードなし） |
| 登録 | 不要（登録なしで持ち帰りまで使えます） |
| コマンドライン | — |
| API・MCP | ドキュメントを参照 |
よくある質問
画像はどこかに送られますか？
送られません。読み込みから色の読み取りまで、すべてブラウザの中だけで処理します。サーバーとの通信はログイン状態の確認・匿名の利用計測・エラー報告のみです。社外に出せない資料のスクリーンショットからでも色を調べられます。
主要色8色はどうやって決めているのですか？
画像を長辺200pxまで間引いてから全画素の色を数え、近い色どうしをまとめて多い順に8色出しています。表示するカラーコードはそのまとまりの中で実際に最も多く使われていた色の値なので、平均して作った「画像に無い色」は出ません。割合は間引いて数えた概算です。
印刷用のCMYKは分かりますか？
このページでは出していません。取り出したHEXをカラーコード 変換に貼ると、CMYKの目安が出ます。ただしCMYKは印刷機・インク・用紙で出る色が変わるため、厳密な色合わせは印刷会社の指定する方法に従ってください。
スクリーンショットから色を調べられますか？
調べられます。スクリーンショットもふつうの画像として読み込めるので、Webサイトの配色を調べる、資料の色を揃える、といった使い方ができます。JPGで撮ると圧縮で色がわずかに変わることがあるため、正確に調べたいときはPNGで撮ってください。