Image Color Extractor

The client sent one photograph. A shopfront, warm wood, brass fixtures, and a particular deep green painted on the window frames — the green their whole rebrand is supposed to grow out of. The brief says 'match the photo.' Somewhere between that email and a finished website, someone has to turn pixels into hex codes, and the client cannot do it, because their answer to 'what green is that' is 'the shop green.'

This tool is the bridge. Drop the photo in and it returns the ten colors that actually define it — each as a copyable hex code, each with the percentage of the image it occupies, ranked so the deep green announces itself instead of hiding among the wood tones. No eyedropper hunting, no squinting at the magnifier trying to decide which green pixel is the real one. The algorithm reads every pixel and reports what is actually there.

It is a different job from an eyedropper, and the difference matters. The Color Picker from Image answers 'what exactly is this pixel' — perfect when you know precisely where to point. The extractor answers 'what is this image made of' — the palette-level question, the one you ask when you are starting from a photo and building outward. Designers use both, usually within the same hour.

1. 1

   Load the image

   Drag in a JPG, PNG, or WebP. If the subject sits on a big background, crop first — the tool reads the whole image, and backgrounds vote with all their pixels.

2. 2

   Set the palette size

   Ten by default, adjustable from one upward. Ten for a working palette, three for a triad, one for a dominant color to theme from. The extraction runs live as you change the number.

3. 3

   Read the swatches

   Each swatch shows hex, RGB, and the share of pixels it captured. The order is by population — the first swatch is the color the image is most made of, not the one with the most personality.

4. 4

   Copy what you need

   Click any swatch to copy its hex code. One more click copies the whole palette as CSS custom properties, ready to paste into a stylesheet as --brand-green and friends.

5. 5

   Prune the near-duplicates

   Photos spawn neighboring shades; delete the ones you will never use. A disciplined palette from a photo is usually five or six colors, not ten.

6. 6

   Extend the winners

   Take the two or three keepers into the Tints and Shades Generator and build the full ladder of lighter and darker steps a design system actually consumes.

The extractor runs median-cut quantization — a clustering method from 1982, when Paul Heckbert needed to display rich photographs on hardware that could only show a handful of colors at once. Forty years later the same algorithm is the standard way to answer 'what colors is this image made of,' because it is fast, deterministic, and its results match intuition remarkably well.

Think of every pixel as a point in three-dimensional space: red, green, and blue are the axes. A sky photo is a elongated cloud of points over in the blue corner; a product shot is a dense cluster near white with a smaller cluster wherever the product's color lives. Median-cut carves that cloud into boxes.

The carving loop: put all pixels in one box. Then, repeatedly, take the box with the most spread — specifically the box whose widest red, green, or blue range is largest — and cut it in two at the median along that axis. The median, not the midpoint: a box with a dense cluster at one end and stragglers at the other splits where the pixels actually are, keeping dense groups intact. Cut until you have as many boxes as the palette size. Average the pixels in each box, count them, and you have your palette: one representative color and one population count per box.

Two honest footnotes. First, the averages are computed on gamma-encoded sRGB values, not linear light — the same shortcut almost every tool takes, and the reason an averaged box can come out very slightly darker than your eye expects. Second, boxes are rectangular in RGB space, and human color perception is not: two visually distant colors can land in one box, and two near-twins can straddle a boundary. In practice both effects are minor, and the pruning step in your workflow absorbs them.

The footnote above — boxes are rectangular in RGB space while human color perception is not — has a whole discipline behind it. RGB distance treats a 20-point shift in deep blue and a 20-point shift in mid-green as the same size of change; the eye does not, because vision weights green heavily, compresses blues, and judges brightness on its own curve. Two swatches a RGB-identical distance apart can read as twins or as strangers, which is why palettes sometimes carry near-duplicate entries the numbers insist are distinct.

The repair is to measure color distance in a space built for perception. CIELAB, from 1976, plots colors as lightness plus two opponent axes, so numeric distance tracks perceived difference far better; its refinements are bundled into the CIEDE2000 formula. OKLab, published in 2020, does the same job with better hue behavior and trivial computation — and its cylindrical form, OKLCH, is now part of CSS Color Module Level 4, which is why modern stylesheets can declare extracted palettes in oklch() and get visually even lightness ramps for free. In any of these spaces, the distance between two colors is called Delta E, and its scale has usable landmarks:

The practical use is pruning. When two of ten swatches look nearly identical, their Delta E is usually somewhere under 5 — same family, no design work between them — and one can go. A disciplined rule: merge or delete swatches closer than about Delta E 10 unless the two carry different roles (a surface and its border can legitimately sit close). The same measurement decides which survivor from a multi-photo extraction is 'the same' green across noon and tungsten shots: the swatch that stays within roughly Delta E 10 of itself across lighting conditions is the one the rebrand can trust.

Here is median-cut on a toy image — eight pixels sampled from a sky, askew with compression noise, exactly the kind of data real photos produce. The pixels: (36,112,232), (40,118,236), (44,120,240), (48,126,244), (50,124,238), (52,126,240), (58,130,246), (60,134,250).

All eight start in one box. The red values span 36 to 60 — a range of 24. Green spans 112 to 134 (range 22), blue spans 232 to 250 (range 18). Red is the widest, so the first cut lands on the red axis, at the median: sorted red values are 36, 40, 44, 48, 50, 52, 58, 60, and the median falls between 48 and 50. Two boxes of four pixels each.

Cut box B again — its blue range of 12 is now the widest — and the median along blue falls between 240 and 246. That produces (51,125,239), or #337DEF, and (59,132,248), or #3B84F8. The second value sits one tick from Tailwind's blue-500 #3B82F6, which is the quiet punchline of the exercise: quantize enough sky photographs and you keep landing near the same blue the web already standardized on. The algorithm is not guessing. It is measuring, and the measurement converges.

On full-size photographs the tool samples rather than reads literally every pixel — at twelve megapixels, every second pixel is already several million data points, and the box geometry stops moving long before you exhaust the image. The determinism survives: same image, same palette, every run.

The opening scenario deserves its finish. The shopfront photo extracts at ten, prunes to six, and each survivor gets a role before any code is written — the discipline that separates a palette from a screenshot:

Then the contrast check, before the design review rather than during it. The shop green #1E3B32 on the off-white #F4EFE6 measures roughly 10.6 to 1 — comfortably past the 4.5:1 WCAG bar for body text and past the 7:1 AAA line, so it can carry headings and even long-form text. The ink #2B2B28 clears 12:1 and owns paragraphs. The terracotta #C46A4E lands near 3.3:1, which fails body text but passes the 3:1 threshold for large text and graphical elements — a button color and a heading color, not a paragraph color. Thirty seconds of arithmetic, and every role is assigned against evidence rather than vibes.

The last step is tokenization: the six values become CSS custom properties — --surface, --primary, --metal, --wood, --ink, --accent — with the tints-and-shades ladder extending each one before the first component is built. The client's 'match the photo' brief is now six copyable values, a checked contrast sheet, and a theme any developer can apply without ever opening the original photograph.

One honest footnote for the handoff meeting: photo-derived colors are slightly desaturated by real-world lighting, and a tone that reads beautifully in the photograph can sit flat in a UI. The brass #B08D57 may want a small saturation lift before it carries interactive accents. The extraction is the evidence; the final nudge is still a designer's judgment call.

The algorithm is honest, which means it reports the image as it is — not as you wish it were. The gaps between those two things are where the edge cases live.

• Background bias. A white studio backdrop at 60 percent of the frame will dominate every palette. Crop to the subject or accept a palette led by studio white.
• Gradient ladders. A smooth sunset is technically thousands of colors; quantized to ten, you get ten steps of the same hue family. True — but not useful as a palette. Lower the count and pick structure over completeness.
• Noise twins. JPEG compression smears edges into one-off colors that earn their own boxes. Merge or delete them; they are artifacts, not design decisions.
• Local vs. global. A color covering 3 percent of the image can be the whole subject if the subject is small in frame. The percentage is a fact about the image, not a verdict about importance.
• No print values. Hex is screen-native. Pantone and CMYK conversions need physical references; any tool promising exact Pantone matches from a photo is promising something the physics of ink does not support.
• Transparency handling. Transparent PNG pixels are excluded from the count — the right behavior — but a logo rendered on transparency looks different than on a colored background, and the palette only knows the pixels that exist.

The extraction itself is reliable; the workflow around it is where palettes go wrong. Five recurring mistakes:

• Promoting the dominant color to brand color. Dominance measures territory, not identity — the color covering a quarter of the frame is usually a wall. The brand-relevant tone is frequently a two-percent accent, and the percentage column exists to assign roles, not rank importance.
• Saving the contrast check for the design review. One minute with the hex values catches the mid-tone accent that fails 4.5:1 before it is baked into twenty components, and the fix is a role reassignment rather than a redesign.
• Laddering before pruning. Generating ten tints of a swatch you will delete tomorrow wastes the ladder and clutters the token file. Extract at ten, prune to the keepers, then build the shade scales for survivors only.
• Extracting from a single photograph. White balance shifts every value in the frame; the same shopfront at noon and under tungsten yields two different palettes. Extract from two or three shots of the same subject and trust the swatches that survive all of them.
• Shipping the raw values as final. Photographic colors arrive slightly desaturated and often a step too dark for screen use. Extraction is evidence gathering; the last nudge — saturation up a notch, lightness up a step — is a human decision the algorithm cannot make for you.

The palette-from-photo move shows up across the whole design economy:

• Brand designers — pulling a working palette from a client's existing photography when no brand book exists
• Web designers — theming a page from its hero image so headers and accents harmonize with the photography
• Presentation builders — matching slide backgrounds to the photos on them instead of fighting them
• Illustrators — sampling a reference photo's palette to keep a piece inside its mood
• Merch and print designers — pulling shirt or poster palettes from a source photograph
• Developers — generating theme tokens from a marketing image, straight into CSS custom properties

The common thread: a photo exists, color decisions must flow from it, and someone needs the numbers in between. The extractor is the numbers in between. What happens next — ladders, contrast checks, duotones — is where the Tints and Shades Generator and the Duotone Image Maker pick up the thread.

Palette size is a design decision before it is a setting. Here is how the options actually differ on the same photograph:

Our working advice: extract at ten, decide at five. The extra swatches are reconnaissance — they show you the neutral range and the noise floor so you can make an informed cut rather than a blind one. And when the deliverable is a single answer — 'what color is this brand, in one value' — the dominant color at palette size one is the honest, measurable version of an answer that otherwise depends on who you ask.

The extraction pipeline has exactly one location: this tab. Your image is decoded into a canvas, the pixel array is read with the standard getImageData call, and the median-cut loop runs in plain JavaScript on that array. The palette renders to the same page. No request leaves the browser with your image attached, because there is nothing for such a request to do.

That property earns its keep on exactly the images people extract colors from — unreleased product shots, client photography under embargo, competitor screenshots being studied. Those files have no business in an upload queue on a color-tool server. Here the queue does not exist, the retention policy is the closing of the tab, and the whole thing still works with the network unplugged.

A freshly extracted palette is a starting point, and three tools turn it into finished decisions:

• Color Picker from Image — the pixel-exact companion, for when you know exactly which point in the photo matters
• Tints and Shades Generator — expand any extracted hex into the full ladder of lighter and darker steps
• Duotone Image Maker — put two extracted colors to work directly on an image

The sequence designers keep repeating: extract the photo's palette at ten, prune to three, ladder the keepers into tints and shades, and theme the layout from the results. One photograph in, a coherent color system out — and every number along the way copied with a click.