Extract colors from an image Β· HEX codes from a photo
Finds the colors used most in a photo or logo and shows them as HEX and RGB codes with their share. Click the picture to pick the color at that spot, and save the palette as a PNG or CSS variables.
π Your files are never uploadedClick the picture to pick the color at that spot. Click a swatch below to copy its HEX code.
Paste a code into the color code converter to get HSL and CMYK and check its contrast against text. To use only part of the photo, crop it first with crop image.
What it is for
Recovering brand colors β you have the logo file but not the color codes. Pick them here and hand a designer the exact HEX.
Backgrounds and text that fit a photo β a thumbnail or social card built on a color taken from the photo itself never clashes with it.
Interior and fashion references β keep the color combination of a picture you like as codes and reproduce the mood later.
Web and app themes β "Copy as CSS variables" gives you --color-1: #β¦; lines ready to paste into a stylesheet.
How the colors are chosen
All the pixels are treated as one box in color space, and the box is split in half along its widest axis until there are as many boxes as colors you asked for (median cut). The average of each box is a palette color and the number of pixels in it is the share. Small accent colors therefore only appear when you raise the count, and a gradient photo can produce several similar colors. When you need the exact value at one spot, click the picture: that reads the original pixel directly.
Why it runs in the browser β the photo is reduced and counted on your device. Nothing is uploaded, which is what you want for unreleased product shots or a logo that is not public yet, and the page works offline.
Frequently asked questions
Is my photo uploaded?
No. The colors are counted inside your browser and the picture goes nowhere. It works with the internet switched off.
The logo color is slightly off
A palette color is an average of similar pixels, so JPEG noise and anti-aliased edges can shift it a few steps. For the exact value, click a flat area of the logo β that shows the pixel as it is. A PNG or SVG original is more accurate than a JPEG.
White background comes first
If the background is most of the picture, it naturally has the largest share. Turn on "Ignore white/black background" to leave out nearly white and nearly black pixels so only the object's colors remain.
What does the percentage mean?
The share of all pixels assigned to that color. With the background ignored, it is the share of the remaining pixels.
Does it work with large photos?
Yes. Counting is done on a reduced copy, so even photos of tens of millions of pixels finish instantly. The color picked by clicking still comes from the full-resolution image.