🎨 画像カラーパレット抽出

画像から主要色を 5 / 10 / 16 色抽出します。HEX・RGB・HSL での表示、CSS variable 形式の一括出力に対応。デザイン参考やテーマカラー作成に。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

🔒 プライバシーについて

・すべての処理はブラウザ内 (Canvas API) で完結します
・画像データは一切サーバーに送信されません
・保存ログ・履歴・データベース等は存在しません

🎨

画像をドラッグ＆ドロップ、クリックで選択、または貼り付け

📖 つまずきやすいポイント

画像から主要な色を 5 / 10 / 16 色抽出し、HEX・RGB・HSL で表示します。処理はブラウザ内で完結し、画像はアップロードされません。抽出されるのは「面積の多い色」であって「デザイン上重要な色」ではありません — 写真なら背景の空や壁が上位を占めますし、ロゴでも余白が最多になります。ブランドカラーを取り出したいときは、その前提で結果を読んでください。

ケース	何が起きるか	どうする
似た色ばかりが並ぶ	JPEG の圧縮ノイズ、写真のグラデーション、アンチエイリアスの縁など、人の目には 1 色に見える領域が、データ上は何百もの微妙に違う色でできています。単純に出現頻度で並べると、上位が同系色で埋まります。とくに空や肌のような広いグラデーションでは顕著です。	抽出色数を減らしてください。16 色より 5 色のほうが、まとまりのあるパレットになります。用途がデザインなら、そのうち実際に使うのは 2〜3 色で、残りはニュアンスの参考です。画像側で対処するなら、画像リサイズで小さくしてから通すと、細かいノイズが平均化されて主要色が拾いやすくなります。
抽出した色をそのまま UI に使うと読めない	写真から取った色は明度がそろっていません。背景に使うつもりの色が中明度だと、白でも黒でも文字のコントラストが足りません。WCAG は本文で 4.5:1、大きな文字で 3:1 のコントラスト比を求めますが、写真から取ったままの色でこれを満たすことは稀です。	抽出した色は「色相のヒント」として使い、明度と彩度は自分で決めてください。カラーコード変換で HSL に直し、`H` だけを残して `L` を振ると、統一感のあるスケール (背景用に 95%、境界線用に 80%、テキスト用に 30% など) が作れます。作った組み合わせは必ずコントラスト比を測ってから採用してください。
同じ画像なのに毎回結果が違う	主要色の抽出には k-means のような、初期値に乱数を使うアルゴリズムが一般的に用いられます。そのため実行のたびに結果が少しずつ変わります。これは不具合ではなく、アルゴリズムの性質です。色数が多いほど、また色の分布がなだらかなほど、揺れが大きくなります。	気に入った結果が出たら、その HEX を控えて固定してください。デザイントークンとして CSS 変数に書き出してしまえば、以降は再抽出の必要がありません。逆に、毎回同じ結果が必要な処理 (サムネイルの背景色を自動生成するなど) をプログラムで組む場合は、k-means ではなく、色空間を格子に分割して最頻の区画を選ぶ方式を選んでください — 決定的なので同じ入力から必ず同じ色が出ます。

抽出した色をそのまま並べただけでは、配色にはなりません。実際に必要なのは、主色 1 つと、それに対する明度違いのスケール、そして対比のためのアクセント 1 色です。色数を増やすほど画面はまとまらなくなります。また、ダークモードでは色を反転させるのではなく、彩度を落として明度を上げ直すのが定石です — 明るい背景で映える鮮やかな色は、暗い背景ではぎらついて読みにくくなります。抽出結果は、そのスケールを組み立てるための出発点として使ってください。

📖 使い方

1

画像を読み込む

ドラッグ＆ドロップ、クリック選択、Ctrl+V で貼り付け。
2

色数を選ぶ

5 / 10 / 16 から抽出する色数を選択。表示形式 (HEX / RGB / HSL) も指定可能。
3

抽出してコピー

各色のスウォッチをクリックでコピー、または CSS variable 一括コピーボタンを使用。

❓ よくある質問

どのアルゴリズムで抽出していますか？

Median Cut アルゴリズムを使用しています。RGB 空間を最も分散の大きい軸で再帰的に分割して代表色を抽出します。k-means より高速で結果も安定しています。

画像はサーバーに送信されますか？

いいえ。Canvas API でブラウザ内のみ処理します。Network タブで通信が無いことを確認できます。

透明 PNG はどう扱われますか？

完全に透明なピクセル (alpha=0) は無視されます。半透明ピクセルはそのまま色情報として使用します。

🔗 関連ツール

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。