How to extract a color palette from an image

Two jobs that get called the same thing

“Get the colors out of this image” covers two tasks that work nothing alike, and reaching for the wrong one is why a palette ends up not matching what you saw.

The first is sampling: you want one specific pixel — the exact blue in a logo, a button in a screenshot, the highlight on a product photo. That’s an eyedropper, and it should give you the literal value stored at that coordinate.

The second is extraction: you want the handful of colors that characterize the whole image — the palette behind a photograph you’re building a moodboard around, the dominant tones of an illustration you’re matching a UI to. No single pixel represents that. It’s a summary of millions of them, and it involves decisions about what counts as one color.

Sampling one pixel, accurately

The traps here are all about what you’re actually clicking. Displayed images are scaled, so the pixel under your cursor may be a blend of several real ones — sample from the full-resolution data, not the preview, or you’ll get an averaged value that exists nowhere in the file. JPEG is the other trap: it stores color at reduced resolution and shifts values near sharp edges, so a brand blue sampled from a JPEG can land slightly off. A PNG or the original vector is more trustworthy. A magnified loupe handles the rest by showing which pixel you’re on before you commit — which matters when the target is a one-pixel border or a thin stroke.

Extracting a palette

Palette extraction has to group similar pixels together, and the common approach is median-cut quantization: treat every pixel as a point in color space, repeatedly split the widest-spread cluster in two, and stop once there are as many clusters as swatches you asked for. Each cluster averages into one color, and ordering them by how much of the image they cover puts the dominant tones first.

This explains two surprises. Palette tools disagree with each other because every extractor weights spread against pixel count differently, so exact matches are rare. And the swatch count changes the character of the result, not just the length of the list: 4–6 surfaces an image’s broad hues, which is what a brand board wants, while 12–16 starts returning near-variants that suit matching a UI to an illustration’s full range.

Which format to copy

The same color has several notations, and they’re not interchangeable in practice.

HEX is the default for handoff — compact, unambiguous, accepted everywhere. RGB is the same information in decimal, useful when a value goes into code that does arithmetic on channels. HSL separates hue, saturation, and lightness, so it’s the one for building a scale from a single color: nudge lightness while holding hue fixed and the tint ramp stays coherent. HSB looks similar but is a different model — it’s what the Photoshop and Illustrator color pickers use, so reach for it when moving a value into Adobe software by hand. CMYK is for print, with a caveat big enough to need its own section.

Why CMYK from a browser is a starting point

A browser has no ICC profile to convert through, so any CMYK it shows comes from the standard formula that maps RGB straight to the four inks. Photoshop doesn’t do that — it converts through a specific profile like U.S. Web Coated (SWOP), factoring in the ink set, the press, and the paper. That’s why the numbers won’t match, and it isn’t a bug in either one.

Use browser CMYK to get in the neighbourhood: roughly how ink-heavy a color is, or whether a vivid screen color will be a problem in print. Confirm the mix in your layout application, against the printer’s specified profile, before anything goes to press.

Doing both in one place

Our image color picker covers both jobs. Drop in a JPEG, PNG, WebP, AVIF, GIF, BMP, or SVG — or paste one from the clipboard — and hover to inspect pixels through an 11 × 11 loupe before clicking to lock one in. Values are read from the full-resolution image rather than the on-screen preview, and HEX, RGB, HSL, HSB, CMYK, and a CSS line each get a copy button, with your last eight picks kept underneath.

The palette builds itself as soon as the image loads. Set it from 4 to 16 swatches, then copy every HEX at once or take the set as CSS custom properties; nearly transparent areas are skipped, so a PNG doesn’t hand you a swatch of its own empty background. If the palette is all you need, color palette from image is the same extraction with the palette front and centre. Both read the file inside your browser — there’s no upload step, and the colors you pick never leave the tab.