Image Color Palette
Pull up to 12 dominant colors from a photo and copy them as HEX, RGB or HSL. Runs in your browser with no upload.
Loading the tool…
User reviews
No reviews yet. If you’ve used this tool, be the first to leave one.
Image Color Palette: complete guide
Walk through the steps and examples, or jump straight to the topic you need.
At a glance
- Supported formats
- One image that the browser can open, such as JPG, PNG or WebP, up to 25MB.
- Number of colors
- From 2 to 12. If the photo has few kinds of colors, only as many as exist are shown.
- How colors are picked
- Median cut. It repeatedly splits along the axis where the colors spread the most.
- Share display
- Also shows the share of pixels each color takes up.
- Reading a spot
- Click the picture to read the color at that spot separately.
- Export
- Choose from a HEX list, CSS variables or JSON.
- Excluded
- Nearly transparent pixels are left out of the main colors.
- Where it runs
- Your photo is not sent to a server and is read only in this browser.
How to use Image Color Palette
Add one photo
Drag and drop it or click to choose, and the main colors are extracted right away. When counting colors it looks at a copy shrunk to 220px on the long side, so you almost never wait even with large photos, and the main colors barely change from shrinking.
Set the number of colors to extract
The default is 6. To see only the overall mood, try 3 to 4, and to split the palette in more detail, raise it to 8 or more. Changing the number recalculates right away.
Read the color at a spot you want
If you need a color that is not among the main colors, click that part of the preview picture. The coordinates are converted to the original proportions rather than the size shown on screen, so you get the exact color even if you click on a small view.
Copy the codes or export them
You can copy the HEX of each color right away, and below you can choose a HEX list, CSS variables or JSON to copy everything or save it as a file. If you need more formats, continue in the Color Converter.
What it’s good for
See which colors are used and how much
Instead of counting colors one by one, it groups similar colors and picks representative ones. It uses median cut, which keeps splitting along the direction where the colors spread the most, so the colors that represent the overall mood of the photo remain. The share each color takes up on screen is shown too, so you can tell right away which color is the dominant one and which is an accent. Nearly transparent areas are not visible, so they are not counted.
Handles the overall colors and the color at one spot
Separately from the list of main colors, clicking on the photo reads the exact color at that spot. Use it when you need a narrow area, such as one part of a logo or the color of a single piece of clothing. The extracted colors can be exported as a HEX list, CSS variables or JSON, so you can paste them straight into code.
Worked examples
Extract 5 colors from a sunset photo
Photo of an orange sky · number of colors 5#F2A65A 42.3%
#D9643A 26.1%
#3C4A6B 18.7%
#1B2036 9.4%
#F7E3C6 3.5%A logo image with transparency
A PNG logo with a transparent backgroundOnly the colors actually used in the logo appear.Main colors and a spot color are used differently
Swipe the table sideways to see the rest.
| Type | What it gives | When to use it |
|---|---|---|
| Main color list | Colors widely used across the whole photo, with their shares | When building a palette that fits the mood |
| Color at a clicked spot | The exact color at that one point | When matching the color of a logo or a specific part |
| Color Converter | Other notations of a code you already have | When changing an extracted code into another format |
When the result isn’t what you expected
Only similar colors come out
This happens when one family of colors covers most of the photo. If you reduce the number of colors to 3 or 4, they are grouped by family.
The color I want is not in the list
Colors in a narrow area have a low share and do not make it into the main colors. Click that part of the preview to read it directly.
It says no main colors were found
This appears when the whole image is transparent. With no visible pixels, there are no colors to count.
It says the image could not be read
The browser cannot open that format. If it is HEIC, convert it with HEIC to JPG first and then add it.
Key terms
- HEX
- A way of writing a color with six characters, like #28613E. It is the most widely used on the web.
- HSL
- A way of writing a color as hue, saturation and lightness. It is handy when you only want to change the brightness a little.
- Median cut
- A method that picks main colors by repeatedly splitting in half along the direction where the colors spread the most.
- Dominant color
- The color used over the largest area on screen. It is the color with the highest share.
Image Color Palette FAQ
How many colors can it give?
You can choose from 2 to 12. If the photo has fewer kinds of colors than you ask for, only as many as exist are shown.
Does it convert to print colors?
No. It deals only with screen colors (HEX, RGB, HSL). CMYK and Pantone spot colors have to follow the print shop's color management, so converting them here could differ from the real printed result.
Does it work on large photos?
Yes. When counting colors it looks at a copy shrunk to 220px on the long side, so even large photos finish quickly, and the main colors barely change from shrinking.
Does the same photo always give the same colors?
Yes. It does not pick at random but splits in a fixed way, so the result is the same every time.
Do the color shares add up to 100%?
Yes. Only visible pixels are used as the base, so the shares of the main colors add up to the whole.
Can I add several photos at once?
For now it handles one at a time. Each photo has different main colors, so checking one at a time is more accurate.