Image color picker
Get a picture's main color palette with each color's share, or click any spot to pick its exact color. Copy HEX, RGB, HSL; export CSS, Tailwind or PNG.
How to pick colors from an image
- Pick, drag or paste (Ctrl+V) a picture.
- See the main palette below (choose 5 to 12 colors), or move over the picture and click to pick the exact color at that spot — with a magnifying loupe.
- Tap the copy icon next to a code, or export the whole palette as CSS, JSON, Tailwind or a PNG image.
Frequently asked questions
Pixels of similar color are grouped together and each group's average color is taken, sorted by the area it covers. The percentage tells how much of the picture that color covers.
Move the pointer (or drag a finger) over the picture: the loupe zooms in so you can aim precisely. Click or lift your finger and the color is added to "Picked colors".
No. Transparent pixels are skipped, so a logo on a transparent background gives the logo's own colors.
Choose Tailwind: you get an @theme block for Tailwind v4 (paste it into your CSS) and a config block for Tailwind v3 (tailwind.config.js). The colors work right away as bg-palette-1, text-palette-2 and so on.
Yes. The palette is worked out on a smaller copy (enough to see the main colors, and much faster), while picked colors are read from a sharp copy up to 1600px, so they match the real color closely.
It is completely free and needs no sign-up.
Related tools
Color converterConvert between HEX, RGB and HSL color codesPhoto collage makerCombine several photos into one grid imageFavicon GeneratorMake website icons from your logoResize ImageResize images in bulkCrop ImageCut out the part you wantRotate & Flip ImageRotate or flip images in one clickCircle crop for avatarCrop a photo into a circle, transparent backgroundAdd text to imageAdd text to a photo, choose position and colorAdd image borderAdd a colored border frame around a photo