Web API見本市
OS連携ユーザージェスチャー必須判定中...

EyeDropper API

画面上の任意のピクセルの色をスポイトで採取できるAPI。ブラウザの外の領域からも色を拾える。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome95+（デスクトップのみ、Android未対応）
Firefox未対応
Safari未対応

備考: Chromiumデスクトップ限定

2権限フロー

  1. 権限不要

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須このAPI

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトあり

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

権限プロンプトは無いが、ユーザージェスチャー内でのみ open() を呼べる。Escキーでいつでもキャンセルできる。

3ライブデモ: 画面の色を採取してパレット化

4コードスニペット

TypeScript（要約版）
// スポイトの起動（ユーザージェスチャー必須）
const dropper = new EyeDropper();

const abort = new AbortController();
try {
  const result = await dropper.open({ signal: abort.signal });
  console.log(result.sRGBHex); // "#3b82f6" 形式
  addToPalette(result.sRGBHex);
} catch (err) {
  // Escキーでのキャンセルは AbortError
  if ((err as DOMException).name !== "AbortError") throw err;
}

// HEXからRGBへの変換
function hexToRgb(hex: string): [number, number, number] {
  const n = parseInt(hex.slice(1), 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

// クリップボードへコピー
await navigator.clipboard.writeText("#3b82f6");