The colors straight from your photo. Pull the key colors and copy them as HEX codes instantly.
Click to choose a file Drag an image here
JPG, PNG, WebP, HEIC, and more
How to use it
- 1Drag in a JPG, PNG, or WebP image, or click to upload it.
- 2Set the number of colors between 3 and 10. Changing the number re-extracts the palette right away.
- 3Check each color’s %, HEX, and RGB in the proportion bar and the color cards.
- 4Click any color to copy its HEX. Hit Copy CSS to grab them all as :root variables at once!
Handy tips
- Fewer colors keep the big, dominant tones; more colors pick up the subtle in-between shades. Adjust to fit your use.
- Copy CSS bundles every color into :root variables, ready to paste straight into your stylesheet.
- The % on the proportion bar shows how much area each color fills in the photo — handy for telling the main color from the accents.
How the color extraction works
First the photo is scaled down so only representative pixels remain, then similar colors are grouped to count how often each one shows up. The colors that appear most become the palette's main tones — but near-identical colors are merged, so nearly the same shade doesn't hog several slots. That's why the colors you get stay clearly distinct from one another.
Picking by area alone creates one problem: a small but striking accent — a red strawberry on a beige table — gets drowned out by a large, muddy color. So this tool reserves a slot or two in the palette just for vivid colors. It lifts up highly saturated colors regardless of their area, making sure the photo's real accent color earns a place in the palette.
Putting the palette to use
A palette is a great starting point for branding and design work. Pull colors from a logo or product shot and it's easy to codify that brand's color rules; unify a slide deck or social card set around colors drawn from one photo and the whole thing reads harmoniously. It's also handy for anything where you reference color combos, like an interior moodboard or an outfit.
If you're building a website or app, Copy CSS is especially convenient. One click copies every color as CSS variables in the form `:root{--color-1 …}`, so you paste it into your stylesheet and use them as color tokens right away. It's a solid starting point when you want to name and manage each color.
Reading HEX and RGB codes
HEX is a color code written as six digits after a hash, like #7C3AED. The first pair is the strength of red, the middle pair green, and the last pair blue, each in hexadecimal (00–FF). It's a standard that works across every web and design tool, so copying a card's HEX value and pasting it reproduces the exact same color.
RGB expresses the same color as three numbers from 0 to 255, like RGB(124, 58, 237). It's easy to read the brightness of red, green, and blue directly, and it comes up often when handling color in apps or code. HEX and RGB only differ in notation — they point to the same color — so pick whichever format the tool you're using expects.
Frequently asked questions
No — color extraction runs entirely in your browser, and the photo is never sent to a server. It only reads the colors, so the original never leaves your device.
Each color comes with HEX (e.g. #7C3AED) and RGB (e.g. RGB(124, 58, 237)). Click a color to copy its HEX, or use Copy CSS to grab them all as :root variables at once.
Anywhere from 3 to 10. Change the count with the slider and the palette re-extracts on the spot.
It’s the share of the photo’s area each color fills. Bigger colors get a wider band, so you can see at a glance which color drives the photo’s mood.
Yes, the result is consistent. The way it counts colors follows fixed rules, so the same photo at the same color count gives the same palette no matter when you extract it. Nothing is randomized, so if a team uses the same file, no one ends up with different colors.
With no vivid accent to fill the saturation slots, it falls back to filling the palette by frequency — the most common gray, black, and white tones. So getting a grayscale palette made of light-to-dark steps from a black-and-white photo is the expected, natural result.