Drag a marker to re-sample its color.
Your image stays on your device — it's read right here in your browser and never uploaded.
Extracted Palette
Image
Drop an image on the preview, paste one with Ctrl/⌘+V, or upload a PNG, JPG, WebP, GIF or SVG.
Need ideas? Browse palettesCSS Output
/* No colors yet */About CSS Image Color Picker
Pull the dominant color palette out of any image automatically, then fine-tune it: drag markers to re-sample colors with a pixel magnifier, add your own points or delete colors. Drop, paste or upload a photo and copy the colors in HEX, RGB or HSL as CSS variables, a plain list or JSON. Your image never leaves your browser.
How to Pick Colors from an Image
- 1Drop an image on the preview, paste one with Ctrl/⌘+V, upload a file, or start with one of the sample photos.
- 2The image's five dominant colors appear right away, with markers on the image showing where each comes from. Use − and + next to Extracted Palette to get between 2 and 10 colors.
- 3Drag a marker to re-sample its color from another spot — a magnifier shows the exact pixel. Press Add color and click the image to place a color of your own, or hover a color and press × to delete it.
- 4Choose HEX, RGB or HSL under Color Format. Click a color to copy it, or copy them all as CSS custom properties, a plain list or JSON. Send an extracted palette to the Color Palette Generator to keep editing it.
Frequently Asked Questions
No. The image is read by your browser and drawn on a canvas on this page. It is never sent to a server, so private screenshots and unpublished designs are safe to use.
The image is scaled down and its pixels are grouped with k-means clustering into the number of colors you choose, ignoring transparent pixels. Each palette color is a real pixel from the image — the one closest to the middle of its group — and the colors are listed from most to least common.
Press Add color, then move the cursor over the image. The magnifier zooms in on the pixels around it, with the exact pixel under the crosshair and its HEX value underneath. Click to add that color. You can also drag any existing marker onto the pixel you want.
PNG, JPG, WebP, GIF and SVG. For an animated GIF the first frame is used. Very large photos are scaled down to 1600 pixels on the longest side, which keeps extraction fast.
Yes. The output panel gives you the colors as CSS custom properties (--color-1, --color-2 and so on) in a :root block, ready to paste into a stylesheet, or as a plain list or a JSON array — in HEX, RGB or HSL, whichever you choose under Color Format.
Related Tools
More free CSS generators you might like.