カラーパレット抽出ツール
写真やデザインから支配的な色をパレットとして抽出し、HEXとRGB値、そして各色が画像の何割を占めるかを表示します。ブランドの色合わせやテーマ構築に便利です。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
カラーパレット抽出ツールの使い方
- 1
画像を追加
写真、スクリーンショット、デザインをドロップするか、クリップボードから貼り付けます。
- 2
色数を選択
5色または6色が使いやすいパレットにちょうど良い数です。
- 3
値をコピー
各サンプルはHEXとRGB、そして画像の何割を占めるかを表示します。
メディアンカット量子化がどのように色を選ぶか
典型的な写真には、微妙なグラデーションや影の一つ一つを個別にカウントすると、どんな使いやすいパレットでも表示できないほど多い、数十万もの異なる色が含まれます。メディアンカット量子化は、画像のすべてのピクセルを3次元色空間の点として扱い、要求されたグループ数になるまで、最も広い範囲を持つ軸 — 赤、緑、または青 — に沿って最大かつ最も分散したグループを繰り返し分割することでこれを削減します。各最終グループの平均色がパレットのサンプルになります。
分割はグループが持つピクセル数ではなく、色のグループがどれだけ分散しているかに導かれるため、結果は単に最頻出のピクセル値ではなく、自然に一般的でありながら視覚的に際立つ色を重視します — ほぼ同一の空の青の大きな領域が、それぞれより小さい面積を占める本当に異なる3つの色を押しのけることはありません。これは古典的なGIFや256色パレット生成の背後にある同じ中核アルゴリズムであり、ここでは画像自体を再描画するのではなく、デザイン用途のパレットを構築するために適用されています。
パレットが期待とまったく違って見える理由
人間の注意は、フレームの実際の占有率にほとんど関わらず、写真の被写体 — 顔、製品、注目の対象 — に向かいますが、ピクセルを数えるアルゴリズムには被写体という概念が全くありません。緑豊かな葉の広がりを背景に撮影されたポートレートは緑が支配的なパレットを返します。緑が本当にピクセルの大半を占めているためですが、写真を見た誰かは、それは背景ではなくフレーム内の人物「について」のものだと言うでしょう。
これが起きた場合の修正は、ほぼ常にパレットを抽出する前に本当に重要な領域に画像をトリミングすることです — 商品写真の被写体にぴったりとトリミングしたり、デザインのモックアップの注目要素にトリミングしたりすることで、結果を偏らせていた背景ピクセルが取り除かれ、パレットが本当に表現しようとしている画像の部分を反映できるようになります。
抽出する色数を選ぶ
色数を減らすと、アルゴリズムはより積極的に一般化を強いられます。これはパレットがブランドやテーマ用の小さく意図的なパレットとして使われる場合に有用です — それぞれが互いに本当に異なる必要がある3色か4色です。色数を増やすと元画像のより細かい違いを捉えられますが、数が6〜7を大きく超えると、ほぼ重複したサンプルを生成し始め、区別が難しくなります。特に微妙なグラデーションを含む画像では、追加のサンプルは実質的に意味のある違う色ではなく、同じグラデーション上の単なる段階にすぎません。
- 3〜4色
- 引き締まったブランドパレット — 主色、副色、そして1つか2つのアクセント。
- 5〜6色
- 全般的なデフォルト。ほぼ重複なく十分な幅があります。
- 8色以上
- 複雑な画像の詳細な分析。サンプル間である程度の冗長性のコストがかかります。
よくある質問
色はどのように選ばれますか?
メディアンカット量子化によってです — 画像の色は要求された数のグループになるまで、最も広い軸に沿ってボックスに繰り返し分割され、各グループの加重平均がサンプルになります。これはGIFパレットが使うのと同じアルゴリズムで、色の際立ちと頻度の両方を重視します。
なぜパレットは見た目と違うのですか?
目は*被写体*に向かいますが、アルゴリズムはピクセルを数えるからです。芝生の上の赤い車の写真は、それが実際に画像の大部分を占めるため、大部分が緑色を返します。気になる部分にトリミングすれば期待通りのパレットが得られます。
パーセントは何を意味しますか?
そのサンプルに割り当てられたピクセルの割合です。視覚的な重みの良い指標です — 画像の40%を占める色は、そのパレットから構築されたどんなデザインでも支配的になるため、通常アクセントではなく背景に属します。
透明な領域は含まれますか?
いいえ。完全に透明なピクセルは除外されるため、透明な背景のロゴは黒に引っ張られるのではなく、ロゴ自体の色を返します。