0

画像からの 5 色パレット — オンライン抽出

ブラウザ内の任意の写真の実際のカラー パレットを抽出します。メディアン カット量子化により、16 進コード、CSS 変数、および JSON エクスポートを使用して 3 ~ 12 のキー カラーが検出されます。

🧵

画像をドラッグ&ドロップ

処理中... 0%
画像ファイルの読み込み
ピクセルのダウンスケーリング
メディアンカット量子化の実行
パレットの構築

結果

Preview Output

このページでは、ムードボード、ブランド シート、デザイン システムで使用される古典的なパレット サイズである 5 色にプリセットされたパレット抽出ツールが開きます。写真をドロップしてボタンを押すと、メディアン カット量子化により、画像がその画像を最もよく表す 5 つの色に減色され、それぞれの色が画像のどの程度をカバーするかによって分類されます。

5 は、最も実用的なパレットのスイート スポットです。背景、中間トーン、2 つのアクセント、ハイライトをキャプチャするには十分ですが、すべての色が機能できるほど十分に小さいです。主要な色は最初のスウォッチにマークされ、各スウォッチはそのピクセル共有を示し、クリックするとその HEX コードがコピーされ、CSS 変数ブロックは --color-1 から --color-5 としてスタイルシートに直接貼り付けられます。

分析は完全にブラウザ内で実行されます。画像はローカル キャンバス上で約 1 万ピクセルにダウンスケールされ、そこで量子化されるため、プライベートな写真や未公開のアートワークがデバイスから流出することはありません。写真ではなく色彩理論に基づいて構築されたパレットが必要ですか?カラー パレット ジェネレーターは、ベース カラーから調和を作成します。つまり、補色的なアプローチです。