Click to upload or drop an image here
PNG, JPG, GIF or WebP — your image stays in your browserAbout building a palette from a photo
Every designer has done this: a photograph has exactly the mood the project needs, and the job is to get that mood out of the picture and into a stylesheet.
Guessing does not work. A colour that reads as "warm grey" on screen is rarely the grey you would have typed. The only way to get it right is to take the actual pixel.
Drop the photo in, move over it with the magnifier, and click the shades you want. Each one joins your palette below with its HEX, RGB and HSL value, ready to copy.
How to use it
- Click Click to upload, drop a photo on the page, or paste an image URL
- Move the pointer over the picture — the magnifier shows the exact pixel under it
- Click to add that colour to your palette
- Pick as many as you need — five or six is usually a palette
- Click any swatch in your palette to bring it back: the big swatch and the HEX, RGB and HSL values all switch to it, and its hex is copied
- Use Copy HEX / RGB / HSL to take whichever format you need
Why you pick the colours yourself
Some tools guess a palette automatically by grouping the most common colours. That sounds better than it is. The most *common* colour in a photograph is usually a large dull area — sky, wall, shadow — and the shade that actually gives the picture its character is often a small one: the rust on a door, the green of one leaf, a highlight on a cup.
You can see which is which. The magnifier lets you take exactly that pixel, at full zoom, so the palette is the one you meant rather than the one an average produced.
The palette is somewhere you can go back to
The swatches are not just a record of what you clicked. Click one and it becomes the
current colour — the large swatch and all three readouts switch to it, and the one
you are looking at is ringed so you can see which is which.
That is what makes comparing two shades practical: take both from the photo, then click
between them and read the values, instead of hunting back across the image for the pixel
you had a minute ago.
Three formats, because different places want different ones
Every colour you pick is shown in all three at once:
- HEX — #3f7a5e. CSS, design tools, almost everywhere
- RGB — rgb(63, 122, 94). Handy when you need the channels separately
- HSL — hsl(154, 32%, 36%). The one to use when you want to build a scale — keep the hue, move the lightness, and you have a tint and a shade that belong together
What people use it for
- Pulling a brand colour out of a logo when nobody can find the brand guide
- Building a website or slide palette from a hero photograph
- Matching paint, fabric or thread to a picture of the real thing
- Getting the exact HEX of a colour in a screenshot
- Finding the colours in a painting or photograph you want to work from
- Checking what a colour really is, rather than what it looks like next to another one
Good to know
- Nothing is uploaded. The image is read in the page and never leaves your device
- Works with PNG, JPG, GIF and WebP
- You can paste an image URL instead of a file — but some servers block other sites from reading their pixels (CORS). If that happens, download the image and upload the file
- Colours are read from the image's real pixels at full size, not from the scaled preview, so the value is exact
- Works on a phone and tablet as well as a computer
- This is the same picker as Image Color Picker — use that page when you want one colour rather than a set
Related tools
- Image Color Picker — the same tool, framed around grabbing a single colour
- Color Picker — choose a colour from a wheel instead of a photo
- Color Contrast Checker — check your palette is readable before you ship it
- CSS Gradient Generator — blend two of your new colours into a gradient
- Word Cloud Generator — another place to put a palette to work
