Extracting Colors from an Image: Pickers, Palettes and Naming

There are three distinct jobs when you want colors from an image — pick one pixel, pull the whole palette, or name a color — and all three can run entirely in your browser. No upload, no watermark, nothing sent to a server. Here’s how each works.

The three jobs

1. Pick a single color

The simplest job: what colour is that pixel? An image color picker draws your image to a canvas, and clicking reads the pixel’s exact red/green/blue values, shown as HEX, RGB and HSL to copy.

For picking outside an uploaded image — say, a color in another app — modern Chrome and Edge expose the EyeDropper API, which opens the operating system’s own eyedropper so you can sample any pixel on your screen. Where the API isn’t available, picking from the uploaded image still works everywhere.

2. Extract a palette

Pulling the dominant colors is a quantization problem: an image has thousands of distinct pixel colors, and you want to reduce them to a representative handful. The classic method is median cut:

1. Put all the sampled pixels into one “box” in RGB space.
2. Find the box’s widest channel (the axis — red, green or blue — with the largest spread) and split it at the median into two boxes.
3. Repeat on the box with the widest range until you have as many boxes as colors you want.
4. Average each final box into one representative color.

The result is the image’s dominant palette, ready to export as CSS or Tailwind variables. It runs pixel-by-pixel on the canvas — the same image color picker does both the pick and the palette.

3. Name a color

Sometimes you have a hex and want a name — “what would you call #2f855a?” The honest way to answer is a perceptual measurement, not a guess:

1. Convert your color and every standard CSS named color to CIELAB, a perceptually organised space.
2. Compute the CIEDE2000 (ΔE) distance from your color to each name.
3. The smallest distance is the nearest name (#2f855a → seagreen).

A ΔE under about 2.3 is a “just noticeable difference”, so a small ΔE means the name is essentially exact. This is exactly the kind of nearest-of-N calculation a language model gets wrong — it names a plausible but not actually closest color. The color name finder measures it.

Why on-device matters here

Images are often private — a screenshot of an unreleased design, a client’s photo, a product mockup. Doing all of this in the browser (canvas pixel reads, in-memory quantization, local ΔE math) means the image never leaves your device. You can prove it: open DevTools’ network tab, or go offline mid-use, and everything keeps working.

Quick summary

To get colors from an image, match the tool to the job: pick a pixel (or use the EyeDropper API) for an exact HEX/RGB/HSL, extract a palette with median-cut quantization, and name a color by nearest CIEDE2000 distance to the CSS names. All three run on-device with no upload — start with the image color picker and the color name finder.

Sources: median-cut color quantization (Heckbert, 1982); CIEDE2000 color-difference formula; the MDN EyeDropper API. Educational information.