How to use the Image Color Palette
- Choose an image or try the example.
- Choose how many colours to find, from 2 to 12.
- Select Find colours, then copy the values or the CSS variables.
Supported files and limits
- Each colour is the centre of a group of similar pixels, with its share of the image.
- Transparent areas are ignored, so a logo on a transparent background gives the logo's colours.
- Values are given as hex, RGB and HSL, and as CSS custom properties.
- JPG, PNG, WebP, SVG and other formats your browser can open.
Common questions
Why is a colour slightly different from the image?
Each colour is the average of similar pixels, which smooths out shading and compression noise. For an exact brand colour, check the original design file.
How many colours should I choose?
Five or six suit most photos and websites. Use two or three for a simple logo, or more to see the detail in a busy photo.
How do I use the CSS variables?
Copy them into your stylesheet and use them as var(--color-1) and so on, or rename them to suit your design.
Is my image uploaded?
No. The colours are found in your browser and the image is never sent to our server or anyone else.