Color Palette from Image — Get HEX, RGB & HSL
Drop in a photo, a screenshot, or a logo and get the colours it is actually built from — as HEX, RGB, or HSL, with the share of the image each colour covers. Copy one value with a tap, or take the whole palette as CSS variables. The image is read in your browser and never uploaded.
Picking colours from a photograph by eye is unreliable: a single pixel sampled with an eyedropper is rarely the colour you think you are seeing, because photographs are full of noise, shadow, and compression. Quantising the whole image instead gives you the handful of colours that genuinely dominate it, which is what you want when a site has to match a product shot, a deck has to match a brand photo, or a room picture has to become a colour scheme.
How the colours are chosen
The image is sampled down and run through median cut, the same quantisation approach that builds GIF palettes: all the pixels start in one box, and the box with the widest colour spread is repeatedly split at its median until there are as many boxes as you asked for. Each box becomes one swatch, and the percentage next to it is the share of sampled pixels it represents. It keeps small but distinct colours — a logo accent, a stripe — that a simple average would wash away.
Related: pick an exact colour with the colour picker, check a pair for readability with the contrast checker, or compress the image once you are done.
How to use Color Palette from Image
- Choose an image — JPG, PNG, WebP, or GIF.
- Pick how many colours you want: 4, 6, 8, or 12.
- Switch between HEX, RGB, and HSL.
- Tap a swatch to copy it, or copy the whole palette as CSS variables.
Features
- Median cut quantisation — The same method GIF palettes use, not a single-pixel sample.
- Share of the image — Each swatch shows how much of the picture it covers.
- HEX, RGB, and HSL — Switch format and every swatch updates.
- Copy one or all — Including a ready-made block of CSS variables.
- 4 to 12 colours — A tight scheme or a full range.
- 100% browser-based — The image is never uploaded.
Frequently Asked Questions
How is this different from an eyedropper?
An eyedropper reads one pixel, which in a photograph is often noise, a shadow, or a compression artefact rather than the colour you meant to pick. This reads the whole image and reports the colours that actually dominate it, each with the share of the picture it covers.
What do the percentages mean?
The share of sampled pixels that fell into that colour group. A background usually takes the largest share, while an accent colour with a small percentage is often the more useful one for design work.
Why do the colours change when I ask for more of them?
Because the groups are recalculated. With four colours a photograph is summarised broadly; with twelve, shades that were merged get their own swatch. Neither is more correct — pick the count that matches what you need.
Can I use it on a logo or a screenshot?
Yes, and flat graphics work particularly well: with few distinct colours in the source, the swatches come back close to exact. Photographs are approximations by nature.
Is the image uploaded anywhere?
No. It is decoded and sampled inside your browser tab, so it never leaves your device.