カラーパレット抽出

カラーパレット抽出ツールとは？#

どの画像も、全体の印象を左右する少数の色を担っています — ロゴのブランドブルー、製品写真のウォームなニュートラル、イラストの 2 色構成など。パレット抽出は、それらの代表色を自動的に取り出し、再利用できるようにします。調和する UI テーマの構築、違和感のないボタンカラーの選定、CSS 変数の生成、さらには、目が重要だと思い込んでいる色と実際に支配的な色の違いの理解に役立ちます。

本ページは、メディアンカットによる色量子化を完全にブラウザ内で実行します。画像を読み込むと、扱いやすいサンプルサイズに縮小され、全ピクセルが読み取られ、アルゴリズムが色空間を最も広いチャンネルに沿って繰り返し分割し、指定された Top-N（2〜16）のスウォッチを生成します。各色は画像に占める割合とともにスウォッチとして得られ、さらに単純な平均色も加わり、HEX リスト、CSS 変数ファイル、構造化 JSON のいずれかで書き出せます。

使い方#

1. 画像を点線の ドロップ領域 にドラッグします（またはクリックしてファイルを選択）。PNG、JPEG、WebP に対応します。透過 PNG も正しく処理され、透過ピクセルはカウント前にスキップされます。
2. 色数 スライダー（2〜16）をドラッグして、抽出する代表色の数を選びます。バランスの取れたパレットには 6 が良い既定値です。2 や 3 にすると支配的なペアだけが浮かび上がります。
3. 右側の スウォッチリスト を読みます。各行に色、HEX/RGB/HSL 値、そのバケットに入ったサンプルピクセルの割合（支配的な順）が表示されます。いずれかの値をクリックするとコピーできます。
4. サイドバーの 平均色 カードで、全ピクセルの単純な平均を確認します。ランク付きパレットではなく全体的な背景トーンが欲しい場合に役立ちます。
5. パレット形式 を選びます。
   • HEX リスト（.txt） — 1 行に 1 つの #RRGGBB、支配的な順。デザインツールにそのまま貼れます。
   • CSS 変数（.css） — :root { --palette-1: …; …; --palette-avg: …; } ブロック。スタイルシートにドロップできます。
   • JSON（.json） — hex、rgb、count、share を持つ構造化スウォッチに、平均色とサンプルのメタデータを加えたもの。
6. パレットをダウンロード をクリックしてファイルを保存します。

主な機能#

• 自作のメディアンカット量子化。 プロの画像ツールと同じ系統のアルゴリズムをタブ内で実行します。最も広いチャンネルを中央値で分割し、要求された数に達するまで現時点で最も広いボックスに対して繰り返します。
• 正直な割合。 各スウォッチは、それが代表するサンプルピクセルの実際の割合を持ちます。「支配的」とは、推測ではなく面積による支配を意味します。
• 平均を支配色と分離。 単純なピクセル平均がランク付きパレットと並んで報告されます。異なる 2 つの問いに 1 パスで答えます。
• 透過ピクセルをスキップ。 小さな閾値未満のアルファは除外されるため、透過 PNG は実際に描画される色を報告し、透過との泥のような混色にはなりません。
• 3 つの書き出し形式。 デザインツール向けの HEX リスト、スタイルシート向けの CSS 変数、プログラム向けの JSON。いずれも画面に見えるものと同じスウォッチから生成されます。
• 100% ローカル。 画像はブラウザでデコード・サンプリングされます。アップロードはありません。

実例#

白背景に深いコーポレートブルーと小さなアクセントのブランドロゴ（ブルーがキャンバスの約 60% を占めるとします）をドロップします。色数 を 4 にすると、典型的な抽出結果は次のようになります。

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

支配的なスウォッチは約 58% のブランドブルーで、次いで白になります。中央値の境界をまたぐためにアルゴリズムが見つけた、暗いシェードと明るいティントの 2 つの追加ブルーに注目してください。これらはホバー状態やシャドウに再利用できる色です。CSS 変数 で書き出すと、ドロップイン可能なテーマが得られます。

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg は全ピクセルの単純平均で、ブランド色に傾いたページ背景によく合う、くすんだ中間のブルーです。

よくある質問#

割合の合計がちょうど 100% になりません。#

表示用に丸められているためです（内部値は JSON 書き出しで小数点以下 4 桁まで正確です）。カウント前に透過ピクセルがスキップされるため、合計は実際にサンプリングされた不透明ピクセルのみを反映しており、そこからも小さな残差が生じます。

要求した数より少ないスウォッチしか得られません。#

すべての残存カラーボックスが均一（全チャンネルで範囲ゼロ）になると、メディアンカットは早期に停止します。分割すべきものが本当に残っていないためです。3 色の画像に 8 色を要求しても、8 つの架空の色ではなく 3 色が返ります。

平均色が支配色と大きく違うのはなぜですか？#

2 つは異なる問いに答えるからです。支配色は最も頻出の単一バケット、平均は全ピクセルの算術平均であり、大きさの異なる複数の領域に引っ張られます。半分が赤で半分が緑の画像は、茶色がかった平均を持ちますが、茶色の支配色はありません。両方とも正しい値です。

写真でも動作しますか？フラットなグラフィック専用ですか？#

両方に動作します。フラットなグラフィックはきれいに分離したスウォッチを与え、写真は現実のトーンが近接する多数の色にまたがるため、よりグラデーション的なセットを与えます。写真の場合は 色数 を 8〜12 に上げて、より豊かな範囲を捉えてください。