EyeDropper API — pick a real screen color

<div class="pg">
    <h1 class="pg-title">🎯 The EyeDropper API</h1>
    <p class="pg-sub">
      Click the button. If your browser supports <code>window.EyeDropper</code>, the
      cursor becomes a real loupe you can point at <em>anything on your screen</em> —
      not just this page. If it doesn't, you get the canvas-only fallback the post
      warns about, so you can feel the difference yourself.
    </p>

<div class="banner info" id="supportBanner">Checking support…</div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn primary" id="pick">🎯 Pick a color</button>
        <button class="btn ghost" id="reset">Reset</button>
        <span class="mode-badge" id="modeBadge">mode: —</span>
      </div>
      <p class="hint" id="controlHint">
        Native mode: point anywhere — your desktop, another tab, this text. Fallback
        mode: click inside the gradient strip below; a plain canvas can only ever
        read pixels it painted itself.
      </p>
      <canvas class="fallback-canvas" id="fallbackCanvas" width="600" height="100" hidden></canvas>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="swatch" id="swatch">—</div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — click "Pick a color."</span>
      </div>
      <p class="hint">Last few picks:</p>
      <div class="chip-row" id="chipRow"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.