Color Palette Extractor
Open a picture and get its main colors, largest share first, ready to copy as HEX codes, CSS custom properties, JSON or a strip of swatches.
Drop a picture here, or
JPG, PNG, WebP, AVIF, GIF or BMP · one picture, up to 50 MB and 40 megapixels
Your picture is read on this device. Nothing is uploaded, sent or saved.
The colors a picture is made of
Matching slides to a product photo, choosing paint to go with a print, or building a website’s colors from a brand picture all start with knowing which colors are really there. This tool finds the main ones and gives you their codes.
How to use it
- Choose a picture or drop it on the box above: JPG, PNG, WebP, AVIF, GIF or BMP, up to 50 MB and 40 megapixels.
- Pick how many colors you want, from 3 to 12. Six is a good start.
- Read the colors, largest share first, each with its HEX, RGB and HSL codes. Copy any HEX code with its button.
- Export the set as CSS custom properties or JSON, or download a PNG strip of swatches.
How the colors are found
The picture is sampled at up to 256 pixels on its longer side, taking real pixels rather than blending them, so every color counted is one the picture contains. Similar colors are then grouped: the groups start from an even split of the colors present and are refined until nothing moves, comparing colors in OKLab, a color space built so that equal distances look about equally different. Each color shown is the average of its group, and its share is the part of the picture that group covers.
Using the results
- CSS: paste the block into a stylesheet and use
var(--palette-1)and the rest. The first is the largest share. - One color: each row’s Copy button copies its HEX code, ready to paste into a design app.
- JSON: each color’s HEX, RGB, HSL and share, for a script or a design tool.
- Text on top: a picture’s main colors don’t always read well together. Check a text and background pair with the Contrast Checker, and turn any code into OKLCH, HWB or CMYK with the Color Converter.
Good to know
- Private: the picture is read in this page, on your device. Nothing is uploaded, sent or saved.
- Same picture, same palette: there is no randomness, so opening it again gives the same colors.
- Small details: a color that covers only a sliver of the picture, such as a thin logo, can be folded into a larger group. Ask for more colors to bring it out.
- Left out: see-through parts. An animated GIF gives the colors of its first frame.