画像からカラーコード（HEX/RGB）を抽出するスポイトツールとJS実装

Color Picker 画像 デザイン JavaScript フロントエンド

UI デザインのスクリーンショットや写真画像から任意のピクセルのカラーコード（HEX / RGB / HSL）を抽出する手法、ブラウザ標準の EyeDropper API、および Canvas を使った自作スポイト機能の実装ガイドです。

1. オンライン 画像スポイト・カラー抽出ツール

画像をドロップするかファイルを選択して、画像上の任意の場所をクリックするとカラーコードを取得できます（画像データは外部サーバーへ送信されません）。

2. JavaScript による画像色抽出の 2 つの実装手法

① ブラウザネイティブの EyeDropper API (推奨・Chrome/Edge対応)

画面上のあらゆる要素（ブラウザ外のデスクトップ画面含む）から直接ピクセル色を取得できる標準 API です。

// スポイト（EyeDropper）を起動するコード
async function pickColor() {
  if (!('EyeDropper' in window)) {
    alert('お使いのブラウザは EyeDropper API に対応していません。');
    return;
  }

  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open();
    console.log(result.sRGBHex); // 例: "#3B82F6"
  } catch (e) {
    console.log('スポイト操作がキャンセルされました。');
  }
}

② HTML5 Canvas getImageData() によるピクセル解析 (全ブラウザ対応)

画像を <canvas> 要素に描画し、クリックされた座標 (x, y) の RGBA 配列を取得します。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 画像読み込み後に canvas に描画
const img = new Image();
img.crossOrigin = "Anonymous"; // CORS エラー防止
img.src = 'sample.jpg';

img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
};

// クリックイベントで座標の RGBA バイト配列を取得
canvas.addEventListener('click', (event) => {
  const x = event.offsetX;
  const y = event.offsetY;
  const pixel = ctx.getImageData(x, y, 1, 1).data; 
  
  // pixel[0]: Red, pixel[1]: Green, pixel[2]: Blue, pixel[3]: Alpha
  const rgbColor = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
  console.log(rgbColor);
});

3. 画像色抽出時の注意点

  1. JPEG 画像の色の滲み（Compression Artifacts）: JPEG 圧縮された画像は輪郭付近で非可逆圧縮による色の揺らぎが発生するため、UI の正確なブランドカラーを取得する際は PNG 形式のスクリーンショット を使用してください。
  2. CORS（Cross-Origin Resource Sharing）制限: 外部ドメインの画像を Canvas に読み込んで getImageData() を呼び出すと、セキュリティ上の理由から Canvas が「汚染（tainted）」されエラーになります。自身のサーバーに画像があるか Blob URL / Data URI 経由で処理する必要があります。