Find the dominant colours of an image, with their share

How to use Dominant Colors

1. Choose an image (a photo, logo, screenshot or artwork).
2. Set Colours from 2 to 12 (the default is 6).
3. Press Extract colours.
4. Read the swatches with their percentages. Below them, the Palette table lists HEX, RGB and share and can be saved as palette.csv; the CSS variables block can be saved as palette.css.

What it does and when to use it

A palette tells you what a picture is “made of”. Designers use it to build a website or slide theme that matches a hero photo, to check a product shot against brand colours, to choose text and button colours for a poster, or to describe a logo’s colours to a printer. Because each colour comes with its share, you also see which one dominates and which are accents.

To read one exact pixel instead, use the Color Picker. To test whether text will be readable on a palette colour, use the Color Contrast checker. For fresh colour ideas that are not tied to a picture, try the Random Palette Generator.

How it works

Everything runs in a Web Worker on your device:

1. The picture is scaled so its longer side is at most 400 px, which keeps the work fast and does not change the colour proportions much.
2. Up to 60,000 pixels are sampled evenly; pixels less than half opaque are skipped.
3. A median-cut method splits the colours into groups. Each round it finds the group with the widest spread in red, green or blue and cuts it in the middle of that range.
4. Each group’s colours are averaged, and the groups are sorted by size.

Worked examples

We built a 400 × 300 px test image and ran the tool’s own median-cut function: the top 30 rows orange #f97316, the right quarter white, the rest blue #2563eb.

With 2 colours, blue and white fall into one group and average to a light blue, #5c8af0, which does not appear in the picture. That is why a few extra colours usually give a more faithful palette.

Using the output. For the 3-colour result, the CSS block reads --color-1: #2563eb;, --color-2: #ffffff; and --color-3: #f97316; inside :root, ready to paste into a stylesheet.

Limits and tips

• Photos have thousands of shades, so the palette is a summary, not a complete list.
• Tiny accents, like a small red logo on a big photo, may merge into a larger group; crop to the area you care about with the Image Cropper.
• There is no randomness: the same file and setting always give the same palette.