画像から色を抽出（カラーピッカー）の使い方｜クリックでHEX・RGBを取得し配色に活かす
公開日：2026年8月11日 対象ツール：画像から色を抽出（カラーピッカー）
「このバナーの青をCSSで再現したい」「資料の配色を参考画像に合わせたい」——そんなときに役立つのが画像から色を抽出（カラーピッカー）です。読み込んだ画像の見たい場所をクリック／タップすると、その1点（ピクセル）の色をHEXとRGBで表示します。さらに写真全体から主要な色をまとめた「代表色パレット」と、最も多く使われる「ドミナントカラー」も自動抽出します。すべてブラウザ内（Canvas）で処理し、画像がサーバーに送信されることはありません。もちろん無料です。
HEXとRGBの違い
HEXは色を16進数の #RRGGBB で表す記法（例: #3B5BDB）で、CSSやデザインツールで最も広く使われます。RGBは赤・緑・青の光の強さを0〜255の数値で表す記法で、rgb(59, 91, 219) のように書きます。どちらも同じ色を指しているだけなので、貼り付け先で使いやすい方を選べば大丈夫です。本ツールは両方を同時に表示し、表示をクリックするだけでコピーできます。
こんな場面で使えます
- 既存画像の色を再現：写真やスクショの中のボタン・見出しの色をそのままCSSに起こす。
- 資料の配色合わせ：スライドやチラシを参考画像の雰囲気にそろえる。
- ブランドカラーの特定：ロゴ画像から主色を採り、テーマカラーとして統一する。
- イラストの色採取：好きな絵の肌色や背景色を採って作品づくりの参考にする。
色を正確に採る手順
- 「画像ファイルを選択」から画像を選ぶか、点線の枠内にドラッグ＆ドロップします。
- 色を知りたい場所をクリック／タップすると、その地点のHEXとRGBが表示されます。
- 表示されたHEXやRGBをクリックして値をコピーします。
表示上は画像が縮小されていても、内部で原寸のピクセル座標に換算してから色を読み取るため、見た目どおりの位置の色が得られます。正確に採るコツは、色が均一な中央あたりを1px単位でねらうことです。文字や図形の境界付近はアンチエイリアス（境界のぼかし）で中間色が混ざり、狙った色と1点だけずれることがあります。JPEGなど圧縮画像では圧縮ノイズの影響もあるので、数箇所を比べると確実です。
代表色パレットとドミナントカラー
画像の下には「代表色パレット」と「ドミナントカラー」が自動表示されます。パレットは、画像を縮小して多数のピクセルをサンプリングし、近い色どうしをまとめて（簡易的な量子化）、使用頻度の多い順に主要な色を6〜8色抽出したものです。写真全体の雰囲気を表す配色をまとめて取り出せます。中でも最頻色のドミナントカラーは、その画像を最も特徴づける色で、テーマカラー選びの出発点になります。各色見本をクリックするとHEXがコピーできます。
採った色の使い道
コピーしたHEX・RGBは、CSSの color や background-color にそのまま貼れますし、Figmaなどのカラー入力欄にも貼れます。1枚の画像から複数の色を採ればパレットの土台が一気に決まります。ただし採った色はあくまで目安なので、使うときは文字と背景のコントラスト（読みやすさ）も確認しましょう。採った色を土台に明るさや彩度を変えた色を作りたいときは、関連ツールの色の作り方（color-mixing）もあわせて使うと便利です。
よくある質問
クリックした色はどうやって取得していますか
画像をCanvasに原寸で描画し、クリックした位置を元画像のピクセル座標に換算してから、その1ピクセルの色（赤・緑・青）を読み取っています。表示が縮小されていても正しい座標に変換するため、見た目どおりの色が得られます。
画像はサーバーにアップロードされますか
されません。色の抽出はすべてブラウザ内（Canvas）で完結し、選んだ画像がネットワーク上に送られることはありません。通信が発生しないためオフラインでも動作し、公開前のデザインカンプや個人的な写真でも安心して使えます。
採った色が実際の見た目と少し違うのはなぜですか
JPEGなどの圧縮画像では、圧縮ノイズで隣り合う画素の色がわずかに変化していることがあります。また画面設定やアンチエイリアスの影響で1点だけずれて見える場合もあります。境界付近を避け、色が均一な中央あたりをクリックすると安定します。
HEXとRGBはどちらを使えばよいですか
どちらも同じ色です。CSSやデザインツールでは #RRGGBB のHEXが広く使われるので迷ったらHEXを、数値でいじりたいときはRGBを選ぶとよいでしょう。本ツールは両方を同時に表示し、それぞれクリックでコピーできます。
クリック1つでHEXとRGBが手に入り、代表色パレットで配色の土台まで作れるのがこのツールの強みです。画像は外部に送らずブラウザ内だけで処理するので、公開前の素材でも安心。まずは手元の1枚で気になる色を採ってみてください。