パレット抽出ガイド

JPG、PNG、WebP、AVIF、GIF、BMP、TIFF画像から主要なカラーパレットを抽出します。各色のHEXおよびRGBコードを取得可能です。すべての抽出処理はブラウザ内で完結し、サーバーへのアップロードは行われません。

必要なもの

ブラウザ — OffscreenCanvasをサポートするChrome、Firefox、Safari、またはEdge 対応形式 — JPG、JPEG、PNG、WEBP、AVIF、GIF、BMP、TIFF 制限 — 1ファイルあたり20MBまで（20MBを超えるファイルは拒否されます） アカウント — 不要 インターネット — ページ読み込み後は不要

パレットの抽出方法

ブラウザでPalette Extractorを開きます。ファイルエクスプローラーから画像ファイルをドラッグし、アップロードゾーンにドロップしてください。または、アップロードエリアをクリックしてデバイスからファイルを選択します。アップロード前にファイルが20MBの制限内であることを確認してください。制限を超えるファイルは拒否されます。抽出する色数（5、8、10、12色）を選択します。色数を減らすと、より整理された使いやすいパレットになります。色数を増やすと微妙な変化を捉えられますが、視覚的に区別しにくい色が混ざる可能性があります。抽出ボタンをクリックすると、量子化アルゴリズムがブラウザ内で画像のピクセルデータを処理します。k-means法を用いて色の類似性に基づいてピクセルをクラスタリングし、各クラスタの平均色を計算します。データはネットワークを介して送信されません。抽出されたパレットを確認してください。各色はHEXコードとRGB値とともにスウォッチとして表示されます。カラーコードをクリックするとクリップボードにコピーできます。これらのコードをデザイン、CSS、または印刷プロジェクトで使用してください。

仕組み

Palette Extractorは、OffscreenCanvas要素と色量子化アルゴリズムを使用して主要な色を抽出します。画像をアップロードすると、ブラウザはFile APIを介して直接メモリに読み込むため、サーバーへのアップロードは発生しません。

libvipsはOffscreenCanvasを使用してオフスクリーンキャンバスを作成し、drawImageを使用してネイティブ解像度で画像を描画します。次に、getImageDataを使用してピクセルデータをRGBA配列として読み取ります。これは、画像のすべてのピクセルについて赤、緑、青、アルファ値を含むUint8ClampedArrayを返します。1920x1080の画像の場合、約800万個の個別の色値が生成されます。

量子化アルゴリズムは、k-meansクラスタリングを使用して色の類似性ごとにピクセルをグループ化します。k個のクラスタ中心（選択したパレットサイズ）を初期化し、RGB空間でのユークリッド距離に基づいて各ピクセルを最も近いクラスタ中心に繰り返し割り当てます。割り当てのたびに、各クラスタ内の全ピクセルの数学的平均としてクラスタ中心を再計算します。このプロセスは、中心が安定するか、最大反復回数に達するまで繰り返されます。その結果、画像の視覚的アイデンティティを捉えた代表的な色セットが得られます。

各色はHEXコードとRGB値とともにスウォッチとして表示されます。libvipsは各クラスタから正確な重心色をサンプリングするため、表示されるスウォッチはそのグループの全ピクセルの数学的平均を正確に表します。

ファイルはすべてブラウザ内のOffscreenCanvasを使用して処理されます。ConvertCraftのサーバーにアップロードされることはありません。

問題が発生した場合

画像がアップロードできない：画像が20MBの制限を超えています。OffscreenCanvasは厳格なメモリ制限内で動作します。20MBを超える画像を処理するにはRAM内に巨大な非圧縮ピクセルバッファが必要となり、ブラウザタブがクラッシュする可能性があります。

パレットに似た色が含まれる：画像に微妙な色の変化があり、アルゴリズムがそれらを別々のクラスタとして扱っています。パレットサイズを小さくして、より明確な色を取得してください。

色が期待と異なる：アルゴリズムは数学的な平均を抽出します。色の知覚的な違いが視覚的な印象と一致しない場合があります。別のパレットサイズを試すか、特定のピクセルに対してスポイトツールを使用してください。

パレットがほぼ一色になる：画像が単一の色に支配されています。アルゴリズムは画像の色の分布を忠実に表現しています。より色のバリエーションがある別の画像を試してください。

### 何色まで抽出できますか？

5色、8色、10色、12色の抽出をサポートしています。色数を減らすと、より整理されたパレットになります。色数を増やすと微妙な変化を捉えられますが、視覚的に区別しにくい色が混ざる可能性があります。

### 特定の領域から色を抽出できますか？

現在のバージョンでは画像全体を分析します。特定の領域から色を抽出したい場合は、Image Converterや専用のトリミングツールを使用して先に画像を切り抜いてから、切り抜いた画像をアップロードしてください。

### プライベートな画像から色を抽出しても安全ですか？

はい。ファイルはすべてブラウザ内のOffscreenCanvasを使用して処理されます。ConvertCraftのサーバーにアップロードされることはありません。画像データがコンピュータから外部へ送信されることはないため、ネットワーク傍受やサーバー側のログ記録に対して完全に安全です。