How to use it
Two jobs, one image: read a single pixel exactly, or let the tool find the colors that carry the picture.
- Load an image. Drag a file onto the drop zone, choose one from your device, or copy a picture anywhere and press Ctrl + V (Cmd + V on a Mac).
- Pick a pixel. A magnifier follows your cursor. Click or tap to keep that color: its hex, RGB, HSL and OKLCH values and its name appear below, and every code copies with one click.
- Read the palette. The tool groups the pixels and shows the colors that cover most of the image. Choose two to eight, and pull from the whole picture or only its vibrant, muted, light or dark parts.
- Move a pin. Each palette color has a numbered pin. Drag one to sample a different spot when the automatic choice lands on a shadow you did not mean to keep.
- Take it with you. Copy the codes, copy CSS custom properties, download a PNG strip, or send the palette to the generator, the contrast checker, the shade generator or the gradient generator.
How the palette is found
Counting how often each exact color appears does not work on a photograph. A blue sky is thousands of slightly different blues, so the most frequent single value is a meaningless sliver, and the color you would actually name never wins.
So the pixels are grouped instead. The image is scaled down to roughly 150 pixels on its longest side, then each pixel is converted from sRGB to OKLab, a space built so that equal numeric distances look like equal differences to the eye. k-means++ then splits those points into as many groups as you asked for.
Each group becomes one swatch, and the percentage on it is the share of the image that group covers. The numbered pin sits on the pixel closest to the center of its group, which is why pins land on the part of the picture a color comes from.
The variant buttons change which pixels are clustered at all. Vibrant keeps colorful mid-tones and drops the near-grays that dominate most photographs, which is how you get a usable accent out of a picture that is mostly asphalt and sky.
A photo hands you a direction, not a finished interface palette. Once the colors are here, the contrast checker tells you which pairs are readable, and the shade generator turns one of them into the steps a real interface needs.
Nothing is uploaded
Your image stays on your device. The browser decodes the file, draws it on a canvas element on this page, and the color math runs on those pixels locally. There is no upload and no copy on a server, so there is nothing to delete afterwards. Close the tab and the image is gone.
That rules out one convenience: this tool cannot fetch a picture from a web address. Reading pixels out of an image that came from another site is blocked by the browser, and the workaround would mean sending the address somewhere to be fetched for you. Save the file first, or copy and paste the image.
Questions
Is my image uploaded anywhere?
No. The file is read by your browser and drawn on this page. There is no upload step, no server call and no copy kept anywhere. Load an image, pull a palette out of it, then go offline: everything still works.
Which image formats can I use?
Anything your browser can decode: JPEG, PNG, GIF, WebP, AVIF, BMP and most SVG files. Pasted screenshots work too, and animated files are read at their first frame. PDFs, iPhone HEIC files and camera RAW files are rejected with a message.
How does the automatic palette work?
The image is scaled down to about 150 pixels on its longest side, every pixel is converted to OKLab, and k-means++ groups them into as many clusters as you asked for. Each cluster becomes one color, and the share on a swatch is how much of the image it covers.
What do dominant, vibrant, muted, light and dark do?
They decide which pixels are clustered. Dominant uses all of them, vibrant keeps colorful mid-tones, muted keeps the washed-out ones, and light and dark keep one end of the lightness range. If a variant matches too little of the image, the tool falls back to every pixel and says so.
Can I pick a color without a mouse?
Yes. Tab to the image, move the sampler with the arrow keys and press Enter to pick; hold Shift to move ten pixels at a time. Each pin is a button in the tab order too, so arrow keys move it and Enter copies its color.
Why is the color slightly different from the one in my design app?
JPEG compression shifts individual pixels, so a flat-looking area is rarely one value. Images over 3000 pixels on the longest side are scaled down here, which averages neighbors. Use a PNG at its original size when you need an exact brand value.
Can I load an image from a URL?
No, and that is deliberate. Reading pixels from an image served by another site taints the canvas, so the browser blocks it, and working around it would mean sending the address to a server. Save the picture first, or copy it and paste it here.
What can I do with the palette afterwards?
Copy every code at once, copy CSS custom properties, or download a PNG strip. The "Open this palette in" row hands the same colors to the palette generator, the contrast checker, the shade generator and the gradient generator.