画像の支配色
画像の代表色と、最もよく使われている色のパレットを見つけます。表示されているすべてのピクセルを4096色のバケットに分類し、最も多いバケットの色を代表色として報告します。画像内で占める割合とともに最大12色をパレットに表示し、全体の平均色も追加します。各色はhex、RGB、HSLの形式で表示されます。仮の色やアクセントカラーが必要なデザイナー、テーマ制作者、開発者に最適です。
よくある質問
代表色はどのように見つけますか？
各ピクセルを4096個のバケットのいずれかに割り当てます。赤、緑、青それぞれを16段階に分けます。ピクセル数が最も多いバケットが選ばれ、その色はバケット内のピクセルの平均です。そのため、白い背景は丸めた値ではなく純白として報告されます。
パレットとは何ですか？
パレットには、代表色以外で最も多いバケットが、選択した色数まで表示されます。色数は1～12色で、初期設定は5色です。各項目にはhex、RGB、HSLの値と、画像内で占める表示ピクセルの割合が示されます。
平均色は代表色とどう違いますか？
平均色は、表示されているすべてのピクセルの平均です。赤い野原の上に青空が広がる写真では、代表色は青または赤になりますが、平均色は両方が混ざったくすんだ色になります。平均色はぼかしたプレースホルダーに、代表色はアクセントカラーに適しています。
透明なピクセルはどのように扱われますか？
半分を超えて透明なピクセルは無視されるため、透明な背景に置かれたロゴでは、黒ではなくロゴの色が報告されます。結果には、画像のうち透明だった部分の割合も表示されます。表示できるピクセルがない画像では、色の代わりにメッセージが表示されます。
どの形式の画像を分析できますか？
JPEG、PNG、GIF、WebP、TIFF、AVIFの画像に対応しており、ファイルサイズは最大5 MBです。アニメーションGIFおよびWebPファイルは最初のフレームを測定します。CMYK画像はカウント前にsRGBへ変換されます。
大きな画像は先に縮小されますか？
一辺が4000ピクセルを超える画像は、カウント前に4000ピクセルに収まるよう縮小されます。そのため割合はごくわずかに変わる場合があります。小さい画像はピクセルごとにカウントされます。
似た色合いが別々の色として表示されるのはなぜですか？
各バケットの幅は16段階のため、バケットの境界を挟んだ2つの色合いは別々にカウントされます。そのため、グラデーションや写真では、パレットに隣り合う色合いがよく表示されます。パレットの色数を増やすと、より多くの色合いを確認できます。
CSSで色を使えますか？
はい。各色は#3366ccのようなhexコード、rgb()値、色相は度数、彩度と明度はパーセントで表すhsl()値で取得できます。CSS、デザインツール、テーマ設定にそのまま貼り付けて使えます。
代表色はどのような用途に使えますか？
よくある用途として、画像の読み込み中に表示する背景のプレースホルダー、カバー画像に合わせたカードやヘッダーのアクセントカラー、商品写真の色による分類、ブランド画像の配色確認があります。構造化された結果は、スクリプトやテーマでも値を簡単に再利用できます。
毎回同じ結果になりますか？
はい。カウント処理は決定的で、同じファイルからは常に同じ代表色、パレット、割合が得られます。2つのバケットのカウント数がまったく同じ場合は、色が最初に現れた順に並びます。