FEA Color Picker

How it works

Chrome ships a native colour picker — the same magnifier the browser uses internally — behind the EyeDropper API. The extension calls it straight from the popup, so there is no injected overlay, no content script, and no host permissions at all. It reads pixels from anything on screen, including local files and other applications.

const { sRGBHex } = await new EyeDropper().open();

The popup does not close while the magnifier is up, so it has to show something for the whole time you are hunting for a colour. It swaps the palette for a compact picking panel and narrows itself to 176px — Chrome sizes a popup to its content, so the window physically shrinks out of the way of whatever you are sampling.

Pressing Escape rejects that promise with an AbortError. That is a cancellation, not a failure, so it is swallowed rather than reported:

catch (error) {
  // Escape and click-outside both land here. Only real failures surface.
  if (error && error.name !== 'AbortError') showPickerError(error);
}

Contrast, not just colour

A hex value on its own rarely answers the question you actually have, which is whether text will be readable on it. Every swatch carries a WCAG badge computed from relative luminance, showing whether black or white passes AA or AAA on that background.

function luminance({ r, g, b }) {
  const channel = (v) => {
    const c = v / 255;
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
}

const ratio = (hi + 0.05) / (lo + 0.05); // WCAG 2.x contrast

Where the palette lives

Colours are kept in chrome.storage.local rather than localStorage, newest first, capped at 60. Re-picking an existing colour promotes it back to the front instead of doing nothing. Export produces CSS custom properties, a plain list, or JSON, in whichever format the copy switch is set to.

:root {
  --color-1: #2563eb;
  --color-2: hsl(217, 91%, 60%);
}