写真からカラーパレットを抽出
カラーパレット抽出ツールのプリセット
写真から配色を構築します。デフォルトは6色で、これはデザインで区別しづらいほぼ重複したものを生成せずに写真の幅を捉えるのに十分な数です。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
カラーパレット抽出ツールの使い方
- 1
画像を追加
写真、スクリーンショット、デザインをドロップするか、クリップボードから貼り付けます。
- 2
色数を選択
5色または6色が使いやすいパレットにちょうど良い数です。
- 3
値をコピー
各サンプルはHEXとRGB、そして画像の何割を占めるかを表示します。
特に写真からテーマを構築する
写真からパレットを抽出することは、ロゴや平坦なデザインから抽出することとは異なる作業です。写真は少数の意図的な平坦な色ではなく、連続的な照明と影を持っているためです — 同じ赤いシャツでも、量子化によって再びグループ化されるまでに、照明が当たった側と影の側を通して、微妙に異なる十数個のサンプルをもたらすことがあります。6色はその幅を捉えるのに十分な余裕です — 一対の支配的な色調、補助色、そして小さいが視覚的に際立つ領域から抽出された1つか2つのアクセント — パレットが同じ色相のほぼ同一の6色に崩れることはありません。
風景や商品写真から構築されたこのようなパレットは、ウェブサイトのテーマやデザインのモックアップの種として機能する傾向があります: 最も一般的なサンプル（通常は空や背景のような最大の領域）は自然な背景色や控えめな表面色であり、カバー率のパーセントが小さいサンプルは、アルゴリズムがすでに画像の他の部分と視覚的に異なる色を優先しているため、アクセントの自然な候補です。
サンプルをデザインの特定の役割に割り当てる前に、カバー率のパーセントを確認する価値があります: 元の写真の45%を占める色は、小さなアクセントとして使われると圧倒的に感じられ、わずか3%しか占めない色は、大きな背景の塗りつぶしとして使われると消えてしまいます。サンプルのカバー率の比率を新しいデザインで似たような視覚的重みの役割に合わせることは、単に孤立して見て一番きれいな色を選ぶよりも、通常バランスの取れた結果を生みます。
よくある質問
色はどのように選ばれますか？
メディアンカット量子化によってです — 画像の色は要求された数のグループになるまで、最も広い軸に沿ってボックスに繰り返し分割され、各グループの加重平均がサンプルになります。これはGIFパレットが使うのと同じアルゴリズムで、色の際立ちと頻度の両方を重視します。
なぜパレットは見た目と違うのですか？
目は*被写体*に向かいますが、アルゴリズムはピクセルを数えるからです。芝生の上の赤い車の写真は、それが実際に画像の大部分を占めるため、大部分が緑色を返します。気になる部分にトリミングすれば期待通りのパレットが得られます。
パーセントは何を意味しますか？
そのサンプルに割り当てられたピクセルの割合です。視覚的な重みの良い指標です — 画像の40%を占める色は、そのパレットから構築されたどんなデザインでも支配的になるため、通常アクセントではなく背景に属します。
透明な領域は含まれますか？
いいえ。完全に透明なピクセルは除外されるため、透明な背景のロゴは黒に引っ張られるのではなく、ロゴ自体の色を返します。