Color Palette From Image
Drop in a photo, screenshot, illustration or logo and pull out its dominant colors — clustered in OKLCH so the results match what you actually see. Nothing is uploaded.
Drop an image here, or
Why perceptual clustering matters
Averaging pixels in RGB tends to return muddy near-greys, because RGB distance does not match perceived difference. Clustering in OKLCH keeps the vivid colors that make an image feel like itself and separates hues that RGB would merge.
From photo palette to UI palette
An extracted palette is a mood, not a design system: photographic colors are rarely accessible as text. Pick the one swatch that carries the mood, send it to the design system generator, and let ramps handle the rest.
Privacy
Extraction happens on a canvas in your own browser tab. There is no upload endpoint and no analytics on the image content.
Frequently asked questions
- Is my image uploaded anywhere?
- No. Extraction runs entirely in your browser on a canvas element. The image never leaves your device and nothing is stored on a server.
- How are the dominant colors chosen?
- Pixels are sampled, converted to OKLCH and clustered with k-means in perceptual space, so results group colors the way your eye does rather than by raw RGB distance.
- Can I turn an extracted palette into UI tokens?
- Yes — send any extracted swatch to the design system generator and it becomes a full set of ramps and semantic light/dark tokens.
- Which image formats work?
- Anything your browser can decode: JPEG, PNG, WebP, AVIF, GIF and SVG. Large images are downsampled before sampling to keep extraction instant.
Related tools
Harmony-based palettes generated in OKLCH with locking, reordering and instant copy.
Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.
Preview palettes as protanopia, deuteranopia, tritanopia and achromatopsia.