画像から色を抽出（ドミナントカラー抽出ツール）
画像をアップロードすると、写真やイラストの中で使われている代表的な色（ドミナントカラー）を自動で抽出します。処理はすべてブラウザ内で完結し、画像はサーバーに送信されません。
使い方のヒント
- 抽出した色のHEXコードは、スウォッチ下部のコピーボタンをクリックするだけでクリップボードにコピーできます。CSSやデザインツールにそのまま貼り付けて使えます。
- 「抽出する色数」を4・8・12から選べます。ロゴやシンプルな配色案には4色、写真のような複雑な色合いを詳しく調べたい場合は12色を選ぶと違いが見えやすくなります。
- 透過PNGの背景が透けている部分は自動的に除外されるため、被写体そのものの色を中心に抽出されます。
- 処理はすべて端末のブラウザ内（Canvas API）で完結し、画像データが外部サーバーに送信されることは一切ありません。機密性の高い画像でも安心して利用できます。
- 抽出された色は出現頻度の高い順に並びます。先頭に表示される色ほど、画像内で広い面積を占めている色です。
よくある質問
本ツールは画像を粗いバケツ（色のグループ）に量子化し、頻度が高いグループの平均色を代表色として返す簡易的なアルゴリズムを採用しています。写真の主要な色調をざっくり把握する用途には十分ですが、専門的なカラーパレット制作ツールのような厳密なクラスタリング（k-meansなど）ではない点にご留意ください。
いいえ、保存されません。本ツールはCanvas APIを使い、画像の読み込みから色の抽出まですべてブラウザ内（クライアントサイド）で処理を完結させています。画像データがサーバーに送信されることは一切ないため、機密性の高い画像でも安全に利用できます。
JPEG・PNG・WebP・GIFなど、ブラウザの![]()
タグで表示できる一般的な画像形式であれば読み込み可能です。ブラウザのファイル選択ダイアログが受け付ける形式に準じます。
はい。各色はHEXコード（例: #3366cc）で表示され、コピーボタンでクリップボードに直接コピーできるため、Figma・Photoshop・CSSなど、HEXコードの入力に対応した任意のツールにそのまま貼り付けて利用できます。
余談ですが ― 写真からブランドカラーを見つけるという仕事
写真や商品パッケージから「使われている色」を抽出する作業は、Webデザインやグラフィックデザインの現場で日常的に発生する。ブランドのビジュアルガイドラインを作る際、既存の写真素材やロゴから代表的な色を洗い出し、それをベースにコーポレートカラーやアクセントカラーの候補を検討する、という手順を踏むことが多い。かつては目視でスポイトツールを使い1色ずつ拾っていた作業を、アルゴリズムで自動化したのが本ツールのような「ドミナントカラー抽出」の役割である。
色の抽出には様々なアルゴリズムがある。本ツールが採用している「バケツ量子化＋頻度集計」は、各ピクセルのRGB値を粗いグループに丸めて出現回数を数えるという単純な仕組みだが、計算コストが低く高速に動作するのが利点である。一方、より高度な手法としてk-means法のようなクラスタリングアルゴリズムを使うと、色空間上の距離に基づいてより自然なグルーピングができるが、計算量が増える分処理は重くなる。
興味深いのは、同じ画像でも「何色抽出するか」によって印象がまったく変わって見える点だ。4色だけ抽出すると画像全体の大まかな色調（暖色系か寒色系かなど）が浮かび上がるのに対し、12色まで増やすと影や反射光による微妙な色の違いまで拾われるようになる。用途に応じて抽出数を調整することで、同じ画像から異なる粒度の情報を取り出せる。