画像からカラーパレット抽出

例：葛飾北斎「神奈川沖浪裏」

メトロポリタン美術館の解説によると、「富嶽三十六景 神奈川沖浪裏」（1830〜32 年頃）を含む北斎の風景版画は、藍と輸入されたプルシアンブルーの配色で知られています。上の画像は同館所蔵品を撮影したパブリックドメイン画像（Wikimedia Commons）を幅 512 画素に縮小したものです。色数 5、最も多い色合いで抽出すると次のようになります。

• #F4EAD4 37.6%（空と波頭の紙の色）
• #F5E5C2 24.9%（黄ばんだ紙）
• #244363 17.1%（波の濃い藍）
• #D3DCCC 10.7%
• #83837C 9.5%

画面の 6 割以上は紙の色です。白に近い色を除外をオンにすると画像の 20.1% が外れ、空いた枠に水色がかった #C4D4CB 7.9% が入ります。割合は画像全体に対する値のままなので、#244363 は 16.7% です。

和風の配色を Web サイトに使うなら、書き出しで Tailwind v4 を選びます。最初の結果は次の @theme ブロックになり、bg-palette-3 で藍色の背景が使えます。

@theme {
--color-palette-1: #F4EAD4; /* 37.6% */
--color-palette-2: #F5E5C2; /* 24.9% */
--color-palette-3: #244363; /* 17.1% */
--color-palette-4: #D3DCCC; /* 10.7% */
--color-palette-5: #83837C; /* 9.5% */
}

スウォッチを「クラスタの平均色」にすると、藍は #2C4A64 になります。最も多い色合いは、そのクラスタで最も多くの画素を占める色合いで、平均色は境目の淡い色も混ざった値です。ロゴや UI のスクリーンショットでは最も多い色合いが元の色そのものになり、絵や写真では平均色のほうが全体の印象に近くなります。

例：バナー画像の色を正確に取る

この 400 × 300 の PNG は、紺 #1E3A8A の背景、下 4 分の 1 の白っぽい帯 #F8FAFC、60 × 60 のオレンジの四角 #F97316 だけでできています。色数 6 のまま抽出すると #1E3A8A 72.0%、#F8FAFC 25.0%、#F97316 3.0% で、元の色と面積がそのまま出ます。見えている画素が 3 つの色グループにしかないため、6 色ではなく 3 色を表示した、とステータス行に出ます。

計算のしくみ

• サンプリング：262,144 画素以下の画像はすべての画素を数えます。それより大きい画像は縮小して読みますが、平滑化はしないので、どのサンプルも元画像の実際の画素です。境目に元画像にない中間色が生まれません。
• 色グループ：各チャンネル 32 段階（1 段階は 256 値のうち 8 値）、32,768 グループで数えます。Color Thief のメディアンカットと同じ 5 ビット精度です。画素は不透明度で重み付けします。
• クラスタリング：OKLab で重み付き k-means を行います。OKLab の直線距離は見た目の色差に近い値です。初期値は決まった順番で選び、乱数は使いません。「鮮やかなアクセントを優先」がオンのときは色相と彩度の差を 2 倍に数え、面積の小さい鮮やかな色も 1 色として残します。
• 統合：0.02 未満しか離れていないクラスタはまとめます。0.02 は CSS Color 4 の色域マッピングが使う「見分けられる最小の差」です。

.gpl は GIMP、Inkscape（パレットフォルダーに置く）、Krita で、.ase は Illustrator・Photoshop・InDesign のスウォッチとして使えます。

ほかの抽出ツールとの違い

2026 年 10 月 2 日に、上のバナーとゴッホ「星月夜」の画像で確認しました。

• patto-tool.com の「画像からカラーパレット抽出」は、ページの説明によると画像を最大 10,000 画素に縮小し、k-means++ で色を選びます。バナーからは元画像にない紺と白の中間色 #8B9AC3 を返し、割合は表示しません。同じ「星月夜」を 2 回読み込むと、灰緑の色が #9AA795 と #A0AB93 で変わりました。
• imageonline.io（日本語版）はバナーの 3 色を正確に返しますが、割合は表示しません。
• ライブラリの node-vibrant 4.0.4 は「Vibrant」「Muted」など 6 つの役割で色を選び、5 ビットのグループから色を作り直すため、バナーの紺は #1C3C8C になります。

どのページも、画像を開いたあとに画像を送るネットワーク要求は出しませんでした（ブラウザのリソースタイミングで確認）。

制限

• 262,144 画素を超える画像は間引いて数えるため、数画素ほどの細部は拾えないことがあります。
• 「最も多い色合い」が元の色と完全に一致するのは、1 つの色がその色グループの半分以上を占めるときです。そうでなければグループの平均色です。
• sRGB の外にある色（Display P3 の写真など）は sRGB に切り詰めます。パレットの表示後、同じサンプル画素を Display P3 で読み直し、完全に不透明な画素のうち sRGB の外にある割合をステータス行に表示します。ブラウザが OffscreenCanvas に対応していれば、開いたファイルはバックグラウンドの Worker でデコードして調べるため、大きな写真の Display P3 への変換はページのスレッドで行いません（表示はパレットより数秒遅れることがあります）。サンプルのイラストと SVG ファイルはページ内で 16 行ずつ読みます。ブラウザが Display P3 で描画できない場合は、チェックできない旨をステータス行に表示します。
• アニメーション GIF は最初のフレームだけを使います。HEIC は Safari でのみ開け、カメラの RAW は変換が必要です。

1 画素の色だけを調べるならスポイト カラーピッカー、色覚による見え方は色覚シミュレーター、文字の読みやすさはカラーコントラストチェッカーで確認できます。