画像カラーパレット抽出
画像の主な色をパレットとして抽出し、HEXコード、CSS変数、JSONでコピーできます。
画像カラーパレット抽出は、写真やデザインの主要な色を見つけてスウォッチとして表示するツールです。色の数は3、4、5、6、8から選べ、画像の中で最も広い面積を占める色から順に並びます。よく似た色はまとめられるので、スウォッチはそれぞれはっきり異なる色になります。パレットはCSS変数やJSON配列としてコピーするか、PNGのカラー見本としてダウンロードできます。
画像カラーパレット抽出の使い方
- 1
画像を開く
写真、イラスト、ロゴ、スクリーンショットをドロップ、選択、または貼り付けます。
- 2
色の数を選ぶ
3、4、5、6、8のいずれかをクリックします。スウォッチはすぐに更新されます。
- 3
1色ずつコピーする
スウォッチのコピーアイコンをクリックすると、そのHEXコードをコピーできます。
- 4
パレットをエクスポートする
「CSS変数をコピー」や「JSONをコピー」を使うか、パレットをPNGのカラー見本としてダウンロードします。
できること
- 面積の大きい順
- 最初のスウォッチは、画像の中で最も広い部分を占める色です。
- はっきり異なる色
- ほぼ同じ色はまとめられるので、パレットに同じ色合いが重複しません。
- 開発者向けの出力
- CSSカスタムプロパティ（--color-1、--color-2など）、またはHEXコードのJSON配列として書き出せます。
- PNGのカラー見本
- 各スウォッチの下にHEXコードを記したパレット画像をダウンロードできます。
よくある質問
パレットの色はどのように選ばれますか？
画像を小さなサイズでサンプリングし、似た色をグループにまとめ、面積の大きいグループから順に表示します。透明なピクセルは無視されます。
選んだ数より少ない色しか出ないのはなぜですか？
すべてのスウォッチがはっきり異なる色になるよう、非常に近い色合いはまとめられます。異なる色が少ない画像では、スウォッチの数が少なくなることがあります。
パレットをCSSで使うには？
「CSS変数をコピー」をクリックすると、--color-1、--color-2などの変数を含む:rootブロックが取得できるので、スタイルシートに貼り付けてください。
小さなアクセントカラーが含まれないのはなぜですか？
パレットは広い面積を占める色を優先するため、小さなロゴのような細部の色は表示されないことがあります。特定の場所の正確な値を知りたい場合は「画像カラーピッカー」をご利用ください。