Dominant Color Extractor

Dominant color extractor for finding the main colors in an image

This dominant color extractor reads an image and lists its main colors, ranked by how much of the picture each one covers. Every color comes with a HEX code, an RGB value, a nearest color name and an exact percentage. Designers use it to build palettes from photos, match a brand to a logo or pick UI colors that fit a hero image. 66Colorful is free, runs in your browser and needs no signup.

How to extract dominant colors from an image

You can extract dominant colors from an image in a few clicks. The results update on their own whenever you change an option.

1. Drop an image on the upload area, click it to browse, or paste an image from your clipboard.
2. Wait for the "Analyzing colors..." message to finish. The dominant colors appear under Dominant Colors and Image Coverage.
3. Read the summary line. It tells you how many colors were found and how much the top color and the top three colors cover.
4. Switch from Original image to Color map to see which pixels belong to which color.
5. Click any swatch to copy its HEX value, or use the info button for more formats.
6. Use Copy palette, Copy CSS, Export CSS, Export JSON or Download PNG to take the result with you.

The tool accepts JPG, PNG, WebP, GIF, BMP, AVIF and SVG files up to 25 MB. Very large images are scaled down before analysis, which barely changes the overall color balance.

Dominant color extractor settings you can control

Three settings shape the result: the number of colors, the sampling resolution and two filter checkboxes. Each change triggers a fresh extraction.

• Number of colors: a slider from 3 to 12, set to 8 by default.
• Sampling resolution: Fast (120 px), Balanced (240 px) or Precise (480 px). Balanced is the default.
• Merge near-identical colors: on by default. It combines swatches that look almost the same, so you may see fewer colors than the slider value.
• Ignore near-white and near-black pixels: off by default. It removes pure backgrounds and deep shadows before the analysis.

How many colors should you extract?

Choose 3 to 5 colors for a brand palette or a UI theme, and 8 to 12 when you want to study a complex photo. A small number groups similar tones together. A large number separates highlights, midtones and shadows into their own swatches.

When should you ignore near-white and near-black pixels?

Turn on the ignore option when a product shot sits on a white backdrop or a logo sits on black. Without it, the background can take the top spot and hide the colors you care about. If every pixel is removed, the tool tells you to switch the option off.

What does the dominant color map show?

The Color map repaints every analyzed pixel in the dominant color it belongs to, so you see the image as flat color regions. It is the fastest way to check whether a swatch really represents a visible area or only a thin gradient.

Hover over or focus a row in the results list while the map is open. The pixels of that color stay vivid and the rest fade, which shows exactly where the color sits in the picture.

How dominant colors and coverage percentages are calculated

The extractor groups similar pixels into clusters using k-means clustering in the Oklab color space. Oklab is built so that distances between colors match how different they look to people. Each cluster center becomes one dominant color, and each pixel is assigned to its nearest center.

Because every analyzed pixel is assigned to a color, the coverage percentages add up to 100%. The method is described in general terms on the k-means clustering page. Transparent pixels are skipped, so a PNG logo with a clear background is measured only on its visible parts.

Here is an example result for a seascape photo with 5 colors:

The coverage column totals 100%. To read a HEX code by hand, split it into pairs: #1E90FF is 1E = 30, 90 = 144 and FF = 255, which gives rgb(30, 144, 255). The HEX vs RGB guide explains the two notations in more detail.

Example swatches: Sky blue Deep navy Sand

What you can export from dominant color results

The extractor offers six ways to take the colors away, from a quick clipboard copy to a downloadable file. Pick the one that matches where the colors will be used.

The CSS output follows the pattern below. Each line is a CSS custom property you can reuse with var().

:root {
  --dominant-1: #1E90FF; /* 46.8% */
  --dominant-2: #0B2545; /* 27.3% */
  --dominant-3: #E8D8B0; /* 15.9% */
}

To turn these values into a full theme, send them to the CSS variable theme generator.

Practical uses for image color extraction

• Brand and logo work: pull the exact colors of a logo or product photo and keep the coverage ratio as a guide for 60-30-10 style layouts.
• UI themes: match buttons, cards and backgrounds to a hero image so the page feels connected to its imagery.
• Moodboards: download the proportional PNG bar and place it next to the source photo.
• Photography and art study: see how a painting or film still distributes its color, and which hues dominate the mood.
• Interior and fashion planning: turn a reference photo into a short list of codes you can compare against paint or fabric samples.

Tips and common mistakes when you find dominant colors in an image

Most surprising results come from the image itself, not the tool. A few habits give cleaner swatches.

• Crop first. Borders, watermarks and large empty margins count toward the percentages.
• Use the color map to verify. A swatch with 2% coverage may look important on a strip but cover only a few details.
• Raise the sampling resolution for fine detail. Precise (480 px) picks up small areas better than Fast (120 px), while Fast is enough for large flat regions.
• Do not expect a vivid accent to rank high. Dominance means area, not visual impact. A small bright color often matters more in a design than a large gray.
• Test text on the results. A dominant color is not automatically readable as a background. Check the contrast ratio against WCAG 2.2 contrast minimum, which asks for 4.5:1 for normal text.
• Remember screens differ from print. The values are sRGB colors for screens. For print, convert them with the HEX to CMYK converter and expect shifts.

Results are repeatable: the same image with the same settings gives the same palette. Different settings can change the list, which is normal because the tool groups pixels differently.

Why dominant colors may not match exact pixels

Each swatch is the center of a cluster of similar pixels, so it is an average that may not appear in the image as a single pixel. This is what makes a dominant color extractor useful: it summarizes thousands of slightly different tones into one clear value. When you need the exact value at one point, sample it with a pixel-level picker instead.

Compression can also shift results, because JPG artifacts add noise around edges. HEIC photos are not supported in every browser, so convert them to JPG, PNG or WebP if you see a decoding message.

Your image stays on your device. The analysis happens in the browser and the file is never uploaded.

Which tool fits your image color extraction task?

If you want a ready-made palette to adjust and save, the Palette from Image tool is built for that. To read the exact color of a single pixel, use the Image Color Picker. For a full histogram view of an image, try the Color Distribution Analyzer, and to give a swatch a plain-English label, use the Color Name Finder.