画像パレット抽出ツール
ブラウザ上で写真の実際のカラーパレットを抽出:メディアンカット量子化により3〜12色のキーカラーを特定し、HEXコード、CSS変数、JSONエクスポートで出力します。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
このパレット抽出ツールは、画像に実際に存在する色を読み取ります。色彩理論から計算された色ではありません。写真をアップロードし、必要な色数(3〜12色、多くの場合は5〜6色が適しています)を選択すると、支配色を先頭に重み順でソートされたスウォッチのパレットが返されます。各スウォッチにはHEXコード、画像内での占有率(%)、コピーボタンが表示されます。エクスポートもワンクリックで、スタイルシート用のCSSカスタムプロパティブロック、スクリプトやデザイントークン用のJSON配列、ムードボード用のパレットストリップPNGが利用可能です。
内部ではメディアンカット量子化を使用しています。これはGIFエンコーダーが何百万色もの色を小さなパレットに押し込む際に利用するアルゴリズムと同じです。まず画像をローカルのcanvas上で約1万ピクセルに縮小し、その後、指定されたクラスタ数に達するまで色空間を最も幅の広いチャンネルの中央値で繰り返し分割し、各クラスタを平均化して1つのスウォッチにします。この処理により、ランダムにサンプリングされた数ピクセルではなく、人間の目が感じる画像の特徴を反映した結果が得られます。
すべてがブラウザ上で完結します。アップロードも待ち行列もアカウントも不要で、未公開のデザイン、クライアントの写真、内部向けのスクリーンショットも完全に安全です。ブラウザがデコード可能な形式であればPNG、JPG、WebP、GIFに対応し、透明部分は無視されるため、PNGロゴからもクリーンなパレットを作成できます。
代表的な用途:ブランドの写真撮影からデザインシステムの色への変換、ヒーロー画像に合わせたランディングページの作成、カバーアートからのチャートやテーマカラーの生成、イラストのパレットのドキュメント化など。なお、ユーザーが選んだベースカラーから調和のとれたパレットを構築するカラーパレットジェネレーターとは異なり、これは実在する画像が既に持っているパレットを抽出するツールです。スウォッチを選び、それを別の表記に変換したい場合は、カラーフォーマットコンバーターでHEXをRGB、HSL、CMYKに変換できます。