色を合わせるために

ピクセルアートのパレット抽出

画像で最もよく使われている色を確認し、色コードをコピーするか、次の描画用に一覧を保存します。

例：キャラクター画像 → 再利用できる色見本

ピクセルアート色見本

1. ピクセルアートの画像を選択

PNGなら最も明確な色の一覧が得られます。このツールは色を数えるもので、画像を変更するものではありません。

1. スクリーンショットではなく原本の絵柄を使う
可能なら可逆のPNGを使ってください。スクリーンショットにはエディターUI、市松模様、描いていない背景が入ることがあります。JPEGや滑らかなリサイズは余分な色を加え、意図的に少ないピクセルアートのパレットをわかりにくくします。
2. どの透明ピクセルを集計するか選択
最小アルファは1–255の尺度を使います。デフォルト128は、不透明度が約半分以上のピクセルを数え、255は完全に不透明なピクセルだけを数えます。しきい値を変えたら再解析し、新しい選択を結果に適用してください。
3. 一覧を確認し、使える部分を選んで書き出す
上位8、16、32、64色から選びます。16進コードをクリックしてコピーするか、表示中の色のCSSまたはJSONを保存してください。順位は頻度によるもので、色相、明るさ、色の芸術的な役割によるものではありません。

条件を満たす各ピクセルは、デコード後のRGB値に基づいて1回数えられます。アルファ値が異なっても条件を満たし、RGBが一致すれば同じ色に加算されます。#303040と#303041のような似た色は別々のままです。このツールは色をクラスタリングしたり量子化したりしません。

割合は、キャンバス全体や表示色だけでなく、最小アルファを満たす全ピクセルを使います。上位8色が該当ピクセルの85%なら、割合の合計も85%です。透明な余白は黒として数えず、除外します。

頻度が示すのは、どの色が面積を占めるかであり、どの色が最も重要かではありません。1ピクセルの目のハイライトは不可欠でも、大部分を占める床の色は無関係かもしれません。キャラクターを個別に抽出してから、影、基本色、ハイライトを自分で階調に整理してください。

例：透明な余白のある32 × 32スプライト
設定または入力	意味
キャンバスは1024ピクセル、合格基準は600	頻度の分母は600
ある色が150回出現	集計したピクセルの25%
異なる23色のうち上位8色	書き出しに含まれるのは、その8色で、23色すべてではありません

アンチエイリアス、JPEGの劣化、背景を確認してください。厳密な集計はそれらの色も忠実に記録します。上位の表示色を減らしても、画像自体は単純になりません。

使用頻度を根拠とし、その後で表現上の判断をします。入力上限は各辺4096 px、800万ピクセル、条件を満たす異なる10万色です。

16を選ぶと画像は16色になりますか？

いいえ。変えるのは表示と書き出しの一覧です。元画像の量子化、色変更、書き換えは行いません。

割合の合計が100%にならないのはなぜですか？

表示されない下位の色が残りを占めます。すべての割合は、条件を満たすすべてのピクセルを分母にします。丸めによる小さな差も生じます。

重要なハイライトがないのはなぜですか？

一覧はピクセル数順です。表示上限を増やす、元画像を絞って切り抜く、アクセント色を手動で採取するなどしてください。順位は見た目の重要性ではありません。

写真を使えますか？

JPGは受け付けますが、写真には膨大な数の似た色があり、色の種類数の上限に達することがあります。写真の代表的な少数色のパレットには、この厳密な集計ではなく、クラスタリングのツールを使ってください。

CSSとJSONには何が入りますか？

CSSには、表示された色に対応する番号付き変数が含まれます。JSONには、元の名前、アルファしきい値、個数付きの表示色が含まれます。どちらにも画像は含まれず、別のスプライトの色を自動で変えるものでもありません。