このツールについて
画像内の近い色を少数の代表色にまとめます。写真、イラスト、ブランド素材から配色の参考を得られます。
使い方
- 画像を選択またはドラッグすると、既定の 5 色パレットを表示します。
- 必要に応じて 3・5・8・10 色に変更してください。
- 各色の色見本、コード、推定割合を確認してください。
- 色を個別にコピーするか、HEX 一覧や CSS 変数をまとめてコピーしてください。
対応形式
- PNG、JPG/JPEG、静止画 WebP に対応します。画像は 1 回に 1 枚ずつ選択またはドラッグしてください。
- 最大 100 MiB・4000 万ピクセル、各辺 16384 ピクセルまでです。大きな画像は多くのメモリーを使うため、端末の性能に合った画像を選んでください。
結果の見方
- 色は推定の重み順に並びます。各色カードに HEX、RGB、HSL の値とコピーボタンがあります。
- 選択数は希望する代表色の数です。単色や色数の少ない画像では、結果の色数が少なくなることがあります。
- 完全透明なピクセルを除外し、その他は Alpha で重み付けします。黒と白も対象です。
色の抽出方法
- 主色抽出と同じ、再現性のあるメディアンカット法を使います。近い色をグループ化して代表色を計算するため、同じ画像と設定では同じ結果になります。
- 主色とパレットは最大 250,000 ピクセル、長辺 1000 ピクセルまで分析します。大きい画像は縮小してサンプリングし、実際の分析サイズを表示します。小さい画像は全ピクセルを使います。
- 3 色は配色全体を簡潔に表し、10 色はより多くの変化を残します。色数を増やしても、小さな色の違いをすべて抽出できるとは限りません。
プライバシー
画像はお使いのブラウザー内だけで処理され、サーバーにはアップロードされません。
入力や結果を自動保存しません。クリアしたりページを離れたりする前に、必要な内容をコピーまたはダウンロードし、元画像も残してください。
よくある質問
カラーパレットはどのように抽出しますか？
画像のピクセルを読み込み、近い色をいくつかの代表グループに量子化して重み順に表示します。大きい画像は縮小してサンプリングし、分析サイズを結果に表示します。
1 枚の画像から複数の色を抽出できるのはなぜですか？
画像には背景、被写体、影、ハイライトなどの色が含まれます。パレットは 1 色の主色だけでなく、複数の代表色でその分布を表します。
3 色と 10 色の違いは？
3 色は配色全体を簡潔にまとめ、10 色はより多くの色の変化を残します。元画像の色数が少ない場合は、選択数より少なくなることがあります。
透明なピクセルはどう扱いますか？
完全透明なピクセルを除外し、その他は Alpha で重み付けします。そのため、同数なら半透明のピクセルは不透明なピクセルより重みが小さくなります。