Extracting a usable palette from an image
How extraction works
The extractor samples the pixels of your image, groups similar colors together and reports the clusters that actually carry the picture — not a raw histogram of every shade. The result is a short list of HEX values with their relative weight, so a dominant background, a mid-tone and the small accent that makes the image recognisable stay distinguishable. Everything runs locally in your browser: the image is never uploaded.
Photographs usually give the cleanest palettes because their colors were balanced by a camera pipeline. Screenshots and UI captures work too, but expect interface greys and pure white or black to appear; that is what the noise controls are for.
Noise, near-blacks and near-whites
Real images contain thousands of near-identical dark and light pixels from shadows, compression and anti-aliasing. Left in, they crowd out the colors you actually want. Hiding noise collapses near-black and near-white clusters so the saturated mid-tones surface. Turn it off when the image genuinely is monochrome or when a specific dark tone is the point — for example a product shot on a charcoal background.
From extracted colors to a design palette
An extracted palette is raw material, not a finished system. Pick one dominant color for large surfaces, one or two supporting tones, and keep the most saturated cluster as the accent. Then check the combinations you plan to ship: text on the dominant color, buttons in the accent, through the contrast checker. If a tone you love fails, adjust its lightness in the OKLCH picker — in OKLCH you can darken a color without dragging its hue sideways. The palette extraction guide walks through a full example.
Going further
Once the palette is balanced, the palette library shows how similar palettes are used and named, and Studio turns the colors into a complete, exportable theme with tints, shades and semantic tokens.
Why private, on-device extraction matters
Client screenshots, unreleased packaging, and paid stock often cannot leave the laptop. Because clustering runs in a Web Worker on your machine, you get OKLCH-ready swatches without an upload queue, account, or retention policy to audit. That is the practical difference versus cloud palette APIs that store the image to bill you later.
After extraction, still verify accessibility: a beautiful photo palette can fail body text. Pair the quietest surface with the darkest ink in the contrast checker, and read the full workflow in the extracting palettes guide.
Typical jobs for the extractor
Moodboards → token starters, competitor packaging teardowns, illustration → UI hand-off, and turning a found photograph into a landing theme. When the source is a live website rather than pixels, switch to Brand from URL so you read CSS truth instead of compressed JPEG noise.