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.