Find the dominant colour of any image
The Dominant Color Extractor tells you the main colour of a picture — the one that covers the most of it — and how much of the image it fills. Drop in a product photo, a logo, a book cover or a screenshot and you get the colour’s HEX, RGB, HSL and OKLCH codes, its nearest CSS colour name, and a colour breakdown bar showing the top five colours by share.
Use it to pick a background that matches a hero image, tag products by colour (“blue sofa”, “beige rug”) or tint a card with an image’s own colour. Everything happens in your browser: the picture is drawn onto a canvas on your device and never uploaded.
How to use the Dominant Color Extractor
- Drop an image onto the upload area, click it to choose a file, or paste a screenshot with Ctrl+V.
- Read the big colour panel: the dominant colour’s HEX code, its nearest named colour and the share of the image it covers.
- Copy the HEX, RGB, HSL or OKLCH value with the button beside it.
- Look at the colour breakdown bar and click any of the top five swatches to see its codes, or “Average of all pixels” for the blended average.
- If a plain white or black backdrop is winning, tick “Ignore white or black background”. Change “Colour grouping” to merge or separate similar shades.
Dominant Color Extractor features
Perceptual clustering
Pixels are grouped with k-means in the OKLab colour space, so shades that look alike to people end up together.
Share of the image
Every colour shows the percentage of non-transparent pixels nearest to it, and the bar draws those shares to scale.
Background removal
Near-white or near-black areas connected to the edges can be skipped, while the same colours inside the subject still count.
Four colour formats
HEX, rgb(), hsl() and oklch() strings ready to paste into CSS, Figma, Canva or code, each with a copy button.
Nearest colour name
The closest of the 148 CSS named colours, measured by OKLab distance, so you can describe a colour in words.
Private and instant
The image is analysed with the canvas API on your device. Nothing is uploaded and there is no sign-up.
How the dominant colour is calculated
The image is first copied at up to 200 pixels on its longest side using nearest-neighbour sampling, so every sample is a real pixel rather than a blur of neighbours. Pixels that are more than half transparent are skipped. Each remaining pixel is converted to OKLab, a colour space designed so that equal distances look equally different to the eye.
The tool then runs k-means clustering: it seeds the first group with the most common colour, adds further seeds with the k-means++ method, and repeatedly moves each group to the average of the pixels nearest to it until nothing changes. Groups closer than ΔE 4 (OKLab distance × 100) are merged, because most people cannot tell such shades apart side by side. The largest group is the dominant colour, and its share is the fraction of pixels closer to it than to any other group. The seed is fixed, so the same image always gives the same answer.
Dominant colour vs average colour
The average colour is the mean of every pixel (this tool averages in OKLab), and it is often a colour that appears nowhere in the picture. A picture that is half red and half blue averages to a muted purple, and a sunset over the sea turns into a murky blend. The dominant colour is a colour that is actually present over a large area, which is why it is the better choice for matching backgrounds or labelling products. The average is still offered as an extra swatch because it works well as a soft placeholder while a large image loads.
| Image | Dominant colour | Average colour |
|---|---|---|
| 60% red, 25% blue, 15% green | #FF0000 red (60%) | #AB5A6B — a dusty rose that is not in the image |
| Orange square on white (76% white) | #FFFFFF white, or #FF8C00 darkorange (96%) with the background ignored | #FFE4CE — a pale peach |
| Half sky blue #87CEEB, half forest green #228B22 | Whichever area is larger | #56AE8E — a teal blend of the two |
Tips for accurate results
- Choose the grouping deliberately. “Broad” groups light and dark versions of a colour together, so a gradient sky counts as one blue. “Fine” keeps shades apart, which suits flat graphics and logos.
- Ignore studio backgrounds. For product photos on white, the background otherwise wins. The option only removes white or black regions touching the image border, so a white collar on a blue shirt still counts.
- Crop first for a specific object. If you only care about one item in a busy scene, cut it out with Crop Image and analyse the crop.
- Need more than one colour? Build a full scheme with the Color Palette Extractor, or sample a single pixel with the Color Picker from Image.
- Check readability. Before putting text on the extracted colour, test the pair in the contrast checker.
Dominant Color Extractor FAQ
How do I find the dominant colour of an image?
Upload the image to this dominant color extractor. It clusters the pixels in OKLab colour space and shows the largest group as the dominant colour, with its HEX, RGB, HSL and OKLCH codes and the percentage of the picture it covers.
Why is the dominant colour white or black?
Plain backgrounds often cover more pixels than the subject. Tick “Ignore white or black background” to skip white or black areas that touch the image edges; the subject’s own colours are kept.
What does the percentage mean?
It is the share of non-transparent pixels whose colour is closer to that swatch than to any other swatch. The top five shares are drawn to scale in the breakdown bar; anything left over is shown as “other”.
Is the result the same as the average colour?
No. The average blends every pixel and can produce a colour that is not in the picture. The dominant colour is a colour that really covers a large part of the image. Both are shown so you can choose.
Why do I get slightly different shades from a JPG photo?
JPG compression and lighting create many near-identical shades. The tool merges shades that are almost indistinguishable and reports the average of each group, so the HEX can differ by a few units from any single pixel you pick.
Are my images uploaded?
No. The image is decoded and analysed by JavaScript in your browser, and it never leaves your device.