🎨 画像から色を抽出（カラーピッカー）

画像を読み込んで、クリック／タップした地点の色をHEX・RGBで取得できます。写真の代表色パレットとドミナントカラーも自動で抽出します。

画像の選択

ここに画像をドラッグ＆ドロップ
または

PNG / JPEG / GIF / WebP など

色の抽出はすべてお使いのブラウザ内（Canvas）で行われ、画像はサーバーに送信されません。オフラインでも動作します。

※ 各色見本・HEX・RGBはクリックでコピーできます。パレットは画像を縮小してサンプリングし、近い色をまとめて頻度の多い順に抽出した目安です。JPEG圧縮のノイズなどで、実際の見た目とわずかに異なる場合があります。

解説

「画像から色を抽出（カラーピッカー）」は、手元の画像から色を取り出すためのツールです。写真やスクリーンショット、ロゴ画像などを読み込み、見たい場所をクリック／タップすると、その1点（ピクセル）の色をHEXコードとRGB値で表示します。さらに画像全体を分析して、写真を特徴づける「代表色パレット（主要色6〜8色）」と、最も多く使われている「ドミナントカラー」も自動で抽出します。画像から色を抽出したい、写真からカラーパレットを作りたい、image（画像）の色を数値で知りたい、といった用途にそのまま使えるカラーピッカーです。

使い方はとても簡単で、画像ファイルを選ぶか、点線の枠内にドラッグ＆ドロップするだけです。読み込んだ画像はブラウザの Canvas に原寸で描画され、クリック／タップした地点の色は getImageData という仕組みで1ピクセルぶんだけ読み取ります。画面上は見やすいように画像を縮小して表示していますが、内部では原寸のピクセル座標へ正しく換算してから色を取得するため、スポイト（吸い取り）のように見た目どおりの位置の色が得られます。PNG・JPEG・GIF・WebP など一般的な画像形式に対応しています。

「クリックで色を取得」する機能（スポイト）は、画像内の特定の一点の色を正確に知りたいときに向いています。たとえばバナーやWebサイトのスクリーンショットの中のボタン色、ロゴのブランドカラー、写真の中の空や海、肌の色など、ピンポイントで色を確認できます。取得したHEX・RGBはそれぞれクリックするだけでコピーでき、CSSやデザインツール、スライド資料の書式設定にそのまま貼り付けられます。

「代表色パレットの抽出」は、画像を小さく縮小してから多数のピクセルをサンプリングし、近い色どうしをまとめて（簡易的な色の量子化）、使用頻度の多い順に主要な色を6〜8色取り出すものです。写真1枚から配色（カラーパレット）をまとめて作りたいときに便利で、各色は占有率のめやすも表示されます。パレットは「HEX一覧をコピー」「CSS変数（--color-1 …）でコピー」「.txtで保存」の3通りでまとめて書き出せます。中でも最頻色である「ドミナントカラー」は、その画像を最も特徴づける色として、テーマカラーやキーカラー選びの参考になります。

HEXは色を16進数の #RRGGBB で表す記法（例: #3B5BDB）、RGBは赤・緑・青の光の強さを0〜255で表す記法です。本ツールはどちらも同時に表示するので、CSSでもデザインアプリでも使いやすい方をコピーして利用できます。なお本ツールは画像に含まれる色そのものを抽出するもので、補色（反対色）や配色パターンを自動生成する機能はありません。抽出した色をもとに補色・類似色・配色バリエーションを組みたいときは、関連ツールの「カラーコード変換」や「カラーパレット生成」、コントラスト確認には「カラーコントラスト比チェッカー」と組み合わせるのがおすすめです。

色の抽出はすべてお使いのブラウザの中だけで行われ、選んだ画像がサーバーやネットワーク上に送信・アップロードされることはありません。通信が発生しないためオフラインでも動作し、公開前のデザインカンプや個人的な写真、社内資料など、外部に出したくない画像でも安心して色を調べられます。PC・スマートフォンのどちらのブラウザでも利用できます。

よくある質問

画像から色を抽出するにはどうすればいいですか？

「画像ファイルを選択」から画像を選ぶか、点線の枠内にドラッグ＆ドロップして読み込みます。あとは画像の見たい場所をクリック／タップすればその地点の色がHEX・RGBで表示され、画像下には代表色パレットとドミナントカラーが自動で抽出されます。インストールや登録は不要で、そのままブラウザで使えます。

写真からカラーパレットを作れますか？

作れます。画像を読み込むと、写真全体から使用頻度の多い主要色を6〜8色まとめて抽出し「代表色パレット」として表示します。各色はクリックでHEXをコピーできるほか、「HEX一覧をコピー」「CSS変数でコピー」「.txtで保存」でパレット全体を一括で書き出せます。写真1枚から配色を起こしたいときに便利です。

スポイトでHEXやRGBを取得できますか？

できます。読み込んだ画像の任意の場所をクリック／タップすると、その1ピクセルの色をスポイト（吸い取り）のように取得し、HEX（#RRGGBB）とRGB（rgb(r, g, b)）の両方で表示します。HEX・RGBそれぞれの表示をクリックするとクリップボードにコピーできます。

クリックした地点の色はどうやって取得していますか？

画像をブラウザの Canvas に原寸で描画し、クリック／タップした位置を元画像のピクセル座標に換算してから、getImageData でその1ピクセルの色（赤・緑・青）を読み取っています。表示は縮小されていても、内部で正しい座標に変換するため、見た目どおりの位置の色が得られます。

画像はアップロード（サーバーに送信）されますか？

アップロードされません。色の抽出はお使いのブラウザ内（Canvas）だけで完結し、選んだ画像がネットワーク上に送られることはありません。通信が発生しないためオフラインでも動作し、公開前のデザインや個人的な写真も安心して色を調べられます。

代表色パレットはどのように選ばれていますか？

画像を小さく縮小してから多数のピクセルをサンプリングし、各色（赤・緑・青）を数段階に丸めて近い色どうしをまとめ（簡易的な量子化）、使用頻度の多い順に主要な色を6〜8色抽出しています。最も頻度の高い色をドミナントカラーとして別に表示します。

HEXとRGBの違いは何ですか？

HEXは色を16進数の #RRGGBB で表す記法（例: #3B5BDB）で、CSSやデザインツールで広く使われます。RGBは赤・緑・青の光の強さを0〜255の数値で表す記法です。本ツールは両方を同時に表示し、それぞれクリックでコピーできます。

取得した色が実際の見た目と少し違うのはなぜ？

JPEGなどの圧縮画像では、隣り合う画素の色が圧縮のノイズでわずかに変化していることがあります。また画面の表示設定やアンチエイリアス（境界のぼかし）の影響で、期待した色と1点だけずれて見える場合があります。境界付近を避け、色が均一な中央あたりをクリックすると安定します。

色が取得できない画像はありますか？

別ドメインから読み込んだ保護付きの画像（CORS制約のある画像）は、ブラウザのセキュリティ上ピクセル情報を読み取れずエラーになることがあります。本ツールはお使いの端末内のファイルを読み込む前提のため、通常はこの問題は起きません。読み込みに失敗する場合はPNGやJPEGなど別の画像でお試しください。

抽出した色は補色や配色パターンも作ってくれますか？

本ツールは画像に実際に含まれている色を抽出するツールで、補色（反対色）や類似色、配色パターンを自動生成する機能はありません。抽出したHEXをもとに補色や配色バリエーションを作りたいときは、関連ツールの「カラーコード変換」や「カラーパレット生成」と組み合わせてお使いください。

対応している画像形式は何ですか？

ブラウザが画像として表示できる形式に対応しており、PNG・JPEG・GIF・WebP など一般的な形式を読み込めます。透明部分（アルファ）を含む画像でも、代表色パレットの抽出時はほぼ透明な画素を除いて集計します。

パレットのHEXをまとめてコピーしたり保存できますか？

できます。代表色パレットの下にある「HEX一覧をコピー」で全色のHEXを改行区切りでコピー、「CSS変数でコピー」で :root { --color-1: …; } 形式のCSS、「.txtで保存」でHEX・RGB・占有率を並べたテキストファイルとして書き出せます。デザインやコーディングにそのまま取り込め、スマートフォンのブラウザからも同様に利用できます。