【HTML5 Canvas】外部API不要。ブラウザだけで画像からカラーパレット＆スポイト抽出するツールを作った

概要
画像ファイルをブラウザ上でローカル解析し、主要カラーパレットの自動生成およびクリック座標のRGB/HEX取得（スポイト）を行う単一HTML完結スクリプトです。

実装ポイント
Canvasのピクセルサンプリング: getImageData を用い、透明ピクセルをスキップしながら一定ステップ（間引き）でRGB値を取得。

色空間の量子化（Quantization）: 近似色をグループ化して頻出色をカウントし、上位パレットを抽出。

クリック座標のスケーリング: CSS表示サイズとCanvas実解像度の比率を計算し、正確なピクセルカラーを取得。

Image Color Extractor - 画像カラーパレット抽出

🎨 Image Color Extractor (完全ローカル動作)

画像をドラッグ＆ドロップ または クリックして選択

JPG, PNG, WebP, GIF (外部通信なし・安全)

<div class="preview-container" id="previewArea" style="display:none;">
  <canvas id="imageCanvas"></canvas>
</div>
<p id="canvasHelp" style="display:none; text-align:center; font-size:0.8rem; color:#64748b; margin-top:8px;">
  💡 画像の上をクリックすると、その特定ポイントの色をスポイト抽出できます。
</p>

📊 自動抽出カラーパレット（クリックでHEXをコピー）

🎯 スポイト抽出した色

クリップボードにコピーしました