画像から色を抽出（ドミナントカラー抽出ツール）
画像をアップロードすると、写真やイラストの中で使われている代表的な色（ドミナントカラー）を自動で抽出します。処理はすべてブラウザ内で完結し、画像はサーバーに送信されません。
画像から色を抽出する方法
写真やイラスト、ロゴ画像などから「よく使われている色」を知りたいとき、スポイトツールで1色ずつ拾うのは手間がかかります。本ツールは画像をアップロードするだけで、画像内で広い面積を占める代表的な色（ドミナントカラー）を自動でリストアップし、HEXコードとRGB値をすぐにコピーできる状態にします。
内部では画像をCanvasに描画してピクセルデータを取得し、似た色をひとまとめのグループに量子化してから、グループごとの出現数を数えて頻度の高い順に代表色を選び出しています。透過PNGの透明部分は自動的に集計から除外されるため、背景が透けている画像でも被写体の色を中心に抽出できます。大きな画像は内部で縮小してから処理するため、数メガピクセルの写真でも待ち時間はほとんどかかりません。
画像から色を抽出する手順
- 画像をアップロードする ドロップ領域に画像ファイルをドラッグ＆ドロップするか、クリックしてファイル選択ダイアログから画像を選びます。
- 抽出する色数を選ぶ 「抽出する色数」から4・8・12のいずれかを選択します。画像を選び直さなくても、選択に応じて結果がすぐに再計算されます。
- 抽出結果のスワッチを確認する 出現頻度の高い順に色のスワッチが並びます。各スワッチにはHEXコードとRGB値が表示されます。
- HEXコードをコピーする スワッチ下部のコピーボタンをクリックすると、そのHEXコードがクリップボードにコピーされ、CSSやデザインツールへそのまま貼り付けられます。
使いこなすためのヒント
- 抽出した色のHEXコードは、スウォッチ下部のコピーボタンをクリックするだけでクリップボードにコピーできます。CSSやデザインツールにそのまま貼り付けて使えます。
- 「抽出する色数」を4・8・12から選べます。ロゴやシンプルな配色案には4色、写真のような複雑な色合いを詳しく調べたい場合は12色を選ぶと違いが見えやすくなります。
- 透過PNGの背景が透けている部分は自動的に除外されるため、被写体そのものの色を中心に抽出されます。
- 処理はすべて端末のブラウザ内（Canvas API）で完結し、画像データが外部サーバーに送信されることは一切ありません。機密性の高い画像でも安心して利用できます。
- 抽出された色は出現頻度の高い順に並びます。先頭に表示される色ほど、画像内で広い面積を占めている色です。
こんな場面で活用できます
ロゴ画像から配色案を作る
既存のロゴ画像をアップロードすれば、ロゴに使われている色をHEXコードとして取り出せるため、Webサイトやスライドの配色をロゴに合わせて統一したいときに役立ちます。
商品写真からブランドカラーの候補を探す
パッケージや商品写真の代表色を洗い出すことで、コーポレートカラーやキャンペーンページのアクセントカラーを検討する材料になります。
イラスト・写真の配色バランスを把握する
抽出する色数を4色と12色で切り替えると、画像全体のおおまかな色調と、細部まで含めた色の内訳の両方を確認できます。
CSSやデザインツールへの色の受け渡し
抽出したHEXコードをコピーしてそのままCSSの変数やFigma・Photoshopのカラーピッカーに貼り付けられるため、配色を手作業で書き起こす手間を省けます。
用語集
- ドミナントカラー
- 画像の中で最も広い面積を占める、あるいは最も頻繁に現れる代表的な色のことです。本ツールが抽出して並べるスワッチはこのドミナントカラーに相当します。
- HEXコード
- 色をRGB各成分を16進数2桁ずつ並べて表す表記方法です。例えば「#3366cc」のように「#」に続けて赤・緑・青の順で表され、CSSやデザインツールで広く使われています。
- RGB値
- 赤（Red）・緑（Green）・青（Blue）の光の三原色を、それぞれ0〜255の数値で表す色の指定方法です。3つの値の組み合わせでほぼすべての色を表現できます。
- 色の量子化
- 似た色をまとめて少数のグループに丸め込む処理のことです。本ツールではRGB各成分を32単位ごとのグループに分けることで、JPEG圧縮などによる微妙な色のばらつきを同じ色として集計しています。
- アルファ値（透明度）
- 画像のピクセルごとの不透明度を表す値です。透過PNGなどで背景が透けている部分はアルファ値が低くなり、本ツールでは色の集計対象から除外されます。
- Canvas API
- ブラウザ上で画像やグラフィックを描画・解析するためのJavaScriptの仕組みです。本ツールはこれを使って画像をピクセル単位で読み取り、サーバーに送信せずに色を抽出しています。
よくある質問
余談ですが ― 写真からブランドカラーを見つけるという仕事
写真や商品パッケージから「使われている色」を抽出する作業は、Webデザインやグラフィックデザインの現場で日常的に発生します。ブランドのビジュアルガイドラインを作る際、既存の写真素材やロゴから代表的な色を洗い出し、それをベースにコーポレートカラーやアクセントカラーの候補を検討する、という手順を踏むことが多いです。かつては目視でスポイトツールを使い1色ずつ拾っていた作業を、アルゴリズムで自動化したのが本ツールのような「ドミナントカラー抽出」の役割です。
色の抽出には様々なアルゴリズムがあります。本ツールが採用している「バケツ量子化＋頻度集計」は、各ピクセルのRGB値を粗いグループに丸めて出現回数を数えるという単純な仕組みですが、計算コストが低く高速に動作するのが利点です。一方、より高度な手法としてk-means法のようなクラスタリングアルゴリズムを使うと、色空間上の距離に基づいてより自然なグルーピングができますが、計算量が増える分処理は重くなります。
興味深いのは、同じ画像でも「何色抽出するか」によって印象がまったく変わって見える点です。4色だけ抽出すると画像全体の大まかな色調（暖色系か寒色系かなど）が浮かび上がるのに対し、12色まで増やすと影や反射光による微妙な色の違いまで拾われるようになります。用途に応じて抽出数を調整することで、同じ画像から異なる粒度の情報を取り出せます。