カラーパレット抽出

どんな画像からも、HEX コード付きですぐに使えるカラーパレットを取り出せます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

カラーパレット抽出でできること

1 ピクセルずつ色を取得する代わりに、抽出ツールは画像内のすべてのピクセルを、選んだ 3〜12 の色数にグループ化し、多い順に一覧表示します。各カードには HEX コード、RGB の値、画像に占める割合が表示されます。

2 つのコピーボタンで結果を再利用しやすくなっています。「HEX をすべてコピー」ではカンマ区切りのリストを、「CSS としてコピー」では :root ブロック内の --color-1 から --color-n までの変数を取得できます。「白、黒、グレーを除く」をオンにすると、ページの背景や文字を除外してアクセントカラーが目立ちます。同じ画像からは常に同じパレットが得られます。

例

選ぶもの

4 本の単色の帯からなる 1000 × 200 px の画像：#3157D5（40%）、#ED6C50（30%）、#2BAE84（20%）、#16181D（10%）
色の数：4

「CSS としてコピー」の結果

:root {
  --color-1: #3157D5;
  --color-2: #ED6C50;
  --color-3: #2BAE84;
  --color-4: #16181D;
}

単色 4 色に枠が 4 つなので、各帯が 1 つの色見本になり、約 40%、30%、20%、10% の割合の順に並びます。

カラーパレット抽出の使い方

「ファイルを選択」をクリックするか、画像を貼り付けます。
「色の数」を設定し、UI のスクリーンショットでは「白、黒、グレーを除く」をオンにします。
「HEX をすべてコピー」「CSS としてコピー」、または各色の「コピー」をクリックします。

知っておきたいこと

パレットの色はピクセルのグループの平均なので、画像内にまったく同じ色があるとは限りません。正確なピクセルの色にはスクリーンショットカラーピッカーを使ってください。
ブランドカラーの細いリンクのような小さなアクセントは、大きなグループに吸収されることがあります。分けるには「色の数」を増やしてください。
透明なピクセルやほぼ透明なピクセルは無視されるため、ロゴの背景がパレットに入ることはありません。

カラーパレット抽出についてよくある質問

画像からカラーパレットを作るには？

画像を読み込むと、その下にパレットが表示され、各色が画像に占める割合の順に並びます。「色の数」を変えて色見本を増減し、HEX コードか CSS 変数をコピーしてください。

パレットの色数はいくつがよいですか？

UI やブランドのパレットなら、背景、サーフェス、文字、メインカラー、1〜2 色のアクセントで 5〜6 色が一般的です。色の幅全体を取りたい写真やイラストには 8〜12 色を使ってください。

パレットがほとんど白とグレーになるのはなぜですか？

アプリのスクリーンショットは、大部分が背景と文字だからです。「白、黒、グレーを除く」をオンにすると、白に近い、黒に近い、グレーのピクセルが除外され、ブランドカラーやアクセントカラーが上位に来ます。