画像からカラーパレットを抽出する方法

なぜ減色しパレットを抽出するのか

減色はいくつもの日常的なワークフローの土台です。デザインシステムは小さく意図された一組のパレットから始まり、その色を参考画像やムードボードから直接取り出せばブランドの一貫性を保てます。インデックスカラーの PNG や GIF は実際に使う色だけを保存するため、画像を32色や64色に切り詰めれば、目立った劣化なくファイルサイズを大きく削減できます。ピクセルアートやゲームのスプライトは通常あえて固定パレットに制約され、スクリーン印刷やリソグラフはインクごとに課金されるため、色数は厳しい予算になります。

代替手段——スポイトで一色ずつ手作業で拾い、HEXコードを1つずつコピーする方法——は遅く、ばらつきます。本当に代表的な色を選び、一組をまとめて書き出せるアルゴリズムは、その手間を取り除き、一連のアセット全体で再現可能な結果をもたらします。

メディアンカット量子化の仕組み

PaletteForge はメディアンカット量子化で減色します。色をランダムに選んだり固定グリッドにスナップしたりするのではなく、すべてのピクセルを色空間内の点として扱い、その空間を最も長い軸に沿って繰り返し2分割します。各分割は中央値で行われるため、色が密集している領域ほど細かく分割されます。最終的なパレットは各領域の平均から、画像がその色調を実際にどれだけ使っているかで重み付けして作られます——だから小さくても鮮やかなアクセントは失われず、広い平坦な背景が過剰に反映されることもありません。

実用上、2つの性質が効いてきます。第一に、マッチングは知覚的に重み付けされた RGB 距離を使うため、似た色は単純な数値の最も近いものではなく、正しいスウォッチに対応します。第二に、処理は完全に決定論的です——同じ画像を同じ色数で処理すれば、常に同じパレットが得られます。AIもランダム性もないため見た目は再現可能で、1つのパレットを共有しなければならないアイコン・フレーム・スプライトのセット全体を作るときに役立ちます。

手順：画像からパレットへ

1. 画像を読み込む——ファイルをページにドロップ、クリックで選択、またはクリップボードから貼り付け。何もアップロードされず、画像はローカルで処理されます。
2. 色数を設定する——8・16・32色をワンクリックで、または2〜256の任意の値を入力。少ない色数は大胆でポスターのような結果に、多い色数はグラデーションや肌の色を保ちます。
3. ディザリングモードを選ぶ——なし・Floyd–Steinberg・Ordered（Bayer）。ビフォー/アフターのスライダーで減色結果と元画像を即座に比較できます。
4. パレットを確認する——選ばれた各色が HEX 値付きのスウォッチとして表示されます。スウォッチをクリックするとコードをコピーできます。
5. 書き出す——パレットを HEX・CSS・JSON・GIMP .gpl・Adobe .ase でダウンロード、または色数とディザリングを反映した PNG として減色画像を保存できます。

ディザリング：なし・Floyd–Steinberg・Ordered

減色すると、滑らかなグラデーションに目に見えるバンディング（縞）が残ることがあります——空や柔らかな影が硬い縞模様になってしまいます。ディザリングは、利用可能なパレット色を細かいパターンで織り交ぜ、目が中間色として混ぜ合わせるようにすることで、これを隠します。PaletteForge は3つのモードを用意し、画像に合わせて手法を選べます。

「なし」は、きれいなベタ塗りが欲しい平面的なイラスト・ロゴ・UIに。Floyd–Steinberg 誤差拡散は丸め誤差を隣接ピクセルへ散らし、写真や緻密なアートワークで最も滑らかな結果になることが多いです。Bayer 4×4 行列による Ordered ディザリングは、くっきりと規則的なハーフトーン質感を生みます——ピクセルアートや、あえてレトロで機械的な粒状感を出す定番の選択です。スライダーが即座に更新されるため、推測ではなく自分の画像で滑らかさとファイルサイズを天秤にかけられます。

書き出し形式と使いどころ

パレットは実際に作業する場所でこそ役立つため、PaletteForge は各用途が期待する形式に書き出します。コード向けには、プレーンな HEX リスト、スタイルシートにそのまま貼れる CSS カスタムプロパティ、ビルドスクリプトやデザイントークンのパイプラインに渡す JSON を。オープンソースのペイント向けには、GIMP .gpl 形式が GIMP・Krita・Inkscape で名前付きパレットとして読み込めます。

Adobe やピクセルアートのワークフロー向けには、.ase（Adobe Swatch Exchange）ファイルが Photoshop・Illustrator・Aseprite に直接読み込まれ、色をそのまま使えるスウォッチグループとして取り込みます。色数とディザリングをすでに適用した PNG として、減色画像そのものをダウンロードすることもできます——インデックスアセットやクイックプレビューに便利です。これにより PaletteForge は、参考画像から本番で使えるパレットまでを1ステップにします。

画像は端末から外に出ません

PaletteForge は Canvas API を使い、すべてブラウザ内で動作します。画像はメモリ内でデコード・量子化・描画され、ファイルがサーバーに送信されることは一切ありません。だから、第三者サービスへのアップロードが選択肢にならない、秘密のモックアップ・未公開のゲームアート・NDA下のクライアント案件でも安全です。

アカウントもログインも利用制限もありません。すべては既に読み込んだページ上で動き、タブを閉じるか再読み込みすれば、あらゆる痕跡は消えます。このツールは設計上ステートレスで——データを送る先のサーバーが存在しません。