A color picker usually returns one pixel. A useful image palette has to summarize thousands of pixels, reject transparent noise, avoid near-duplicates and still disclose what happens when a color falls outside the target gamut.
Privacy boundary: the selected image is decoded into an in-memory canvas. The site has no image-upload endpoint, and analytics does not receive the image, filename or extracted colors.
The extraction pipeline
- Decode locally. The browser reads the file selected by the user.
- Downsample. A bounded canvas reduces computation while keeping the broad color distribution.
- Filter. Nearly transparent pixels are ignored so an empty background does not become a dominant cluster.
- Cluster in Oklab. Iterative k-means groups nearby perceptual colors instead of grouping raw channel values.
- Convert and map. Cluster centers become OKLCH, then are checked and mapped to sRGB or Display P3.
- Sort for handoff. Results are presented with coordinates, fallbacks and export formats.
How many colors should you extract?
| Count | Best for | Common failure |
|---|---|---|
| 3–4 | Hero art and simple brand mood | A small accent may disappear into a larger region. |
| 5–7 | Balanced product or editorial palette | Similar neutrals can consume several slots. |
| 8–10 | Detailed illustration exploration | Output may be too literal for a UI system. |
Start with six colors. If two swatches serve the same visual role, reduce the count. If an important accent is absent, crop the image before extraction or increase the count temporarily.
An image palette is evidence, not a design system
Photography contains lighting, compression and material effects that do not translate directly to interface states. Use extracted colors as anchors. Then build controlled ramps, assign semantic roles and verify text contrast on the real surfaces.
Known limitations
K-means depends on its starting centers and pixel distribution. Tiny details may be underrepresented, and two perceptually distinct materials can share a similar flat color. Animated formats are sampled from the decoded frame exposed to the canvas. Very large files are rejected to keep work bounded.
Pick a file without uploading it.
Use the Image mode and choose 3–10 clusters.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.