Color distribution analyzer for any image
The color distribution analyzer on 66Colorful shows how the colors in an image are spread across hue, saturation and lightness. Upload a photo, logo or screenshot and you get histograms, dominant colors with percentages, a color family breakdown and tonal balance. The tool is free, works in the browser and needs no signup.
Your image is analyzed on your own device and is not uploaded to a server. That makes it safe to check unreleased designs, client work or private photos.
How to analyze the color distribution of an image
You analyze an image by loading it and reading the results, which appear as soon as the file is decoded. The steps below follow the controls on the page.
- Drop an image on the upload area, click it to browse, or paste an image from your clipboard. JPG, PNG, WebP, GIF, BMP, AVIF and SVG files up to 25 MB are accepted.
- No image at hand? Press Try a sample image to load a built-in gradient and see how every panel works.
- Choose Hue histogram bins (12, 24, 36 or 72) to set how finely the color wheel is sliced.
- Set Bar height scale to Linear, or Square root if small bars are hard to see.
- Pick an Analysis resolution: Fast (160 px), Balanced (320 px) or Precise (640 px).
- Read the statistics, dominant colors, color families and histograms. Hover or tap any bar to see its exact value.
- Use Copy summary, Copy palette, Export JSON or Download PNG to keep the results.
What the image color statistics mean
The Image Color Statistics panel condenses the whole picture into six numbers plus a tonal bar. Each one answers a different question about the image.
Peak hue and mean hue in image color analysis
Peak hue is the range of the color wheel that holds the most chromatic pixels, shown with its share. Mean hue is a circular average, so reds near 0° and 360° average correctly instead of landing on green. Both count only pixels that have a real hue.
The tool treats a pixel as gray, near-black or near-white when its HSL saturation is under 10%, or its lightness is under 3% or over 97%. Those pixels are left out of the hue figures and are reported as the remainder of the Chromatic pixels share.
Average saturation and lightness of an image
Average saturation and average lightness are HSL values taken across all visible pixels. A low saturation average suggests a muted or monochrome image. A high lightness average points to a bright, airy image. Mostly transparent pixels (under 50% opacity) are ignored.
Worked example: the pixel #1E90FF is rgb(30, 144, 255), or hsl(210, 100%, 56%). With 36 hue bins it falls in the 200° to 210° bar, because its hue is about 209.6°. For a deeper look at the two models, see HSL vs HSV.
Image colorfulness score explained
Colorfulness is a single number based on the Hasler and Süsstrunk (2003) metric, which measures how much color variety and intensity an image carries. The result is labeled from "not colorful" (below 7.5) up to "extremely colorful" (95.5 and above). A flat gray screenshot scores near zero, while a vivid poster scores high.
Tonal balance of an image using CIE L*
Tonal balance splits pixels into shadows, midtones and highlights using CIE L* lightness. Shadows are below 33, highlights are above 67 and everything between is midtones. L* tracks perceived lightness better than raw RGB values: mid gray #808080 sits at about L* 54.
How do you read a hue, saturation and lightness histogram?
A histogram is a bar chart that counts how many pixels fall into each range of a value. The image histogram idea is the same in photo editors, but this tool splits it into three color properties.
- Hue histogram: bars run around the color wheel from 0° (red) through green and blue and back. Each bar is tinted with its own hue, and heights show the percentage of chromatic pixels.
- Saturation histogram: 20 bars of 5% each. A tall bar on the left means many dull pixels. A tall bar on the right means vivid color.
- Lightness histogram: 20 bars from black to white. A cluster on the left is a dark image, a cluster on the right is a light one, and a spread-out shape suggests strong tonal range.
One narrow spike in the hue chart indicates a near-monochrome image. Two spikes roughly 180° apart suggest a complementary scheme. To work with such pairings, try the Color Harmonies Generator.
Dominant colors and color family breakdown
Dominant colors are the handful of shades that best represent the image, listed as HEX codes with their percentage of coverage. The tool finds up to 8 by grouping similar colors in the OKLab color space, then assigns every pixel to its nearest color. Shares therefore add up to 100%, and very similar shades are merged, so you may see fewer than 8.
Click any swatch to open its color details. If you only need a palette to reuse, the Palette from Image tool is built for that, and the Dominant Color Extractor focuses on a single main color.
The Color Family Breakdown groups every pixel into named families such as red, blue or gray and shows each share in a stacked bar. Below it, pills total the image as warm, cool or neutral. This answers questions like "is this photo mostly cool?" at a glance.
Color histogram settings you can control
Three settings change how the analysis is drawn and counted. Each recalculates or redraws the results immediately.
| Setting | Options | When to change it |
|---|---|---|
| Hue histogram bins | 12 (30° each), 24 (15°), 36 (10°), 72 (5°) | Use 12 for broad color groups and 72 to separate close hues |
| Bar height scale | Linear, Square root | Switch to Square root when one tall bar hides the rest |
| Analysis resolution | Fast 160 px, Balanced 320 px, Precise 640 px | Use Precise for fine detail and Fast for quick checks |
Large images are scaled down to the chosen size on the long edge before pixels are counted. Balanced is the default and is enough for most photos.
What can you use an image color histogram for?
An image color histogram turns a visual impression into numbers you can compare and share. These are common situations.
- Photography: check whether a set of photos has a consistent tonal balance and color cast before editing.
- Branding and web design: confirm that a hero image supports your brand colors, then check text contrast over it.
- Art and illustration: see how saturation and lightness are distributed in a finished piece.
- Marketing: compare creative variants by warm and cool balance, and read their color psychology associations.
- Teaching: show students how hue, saturation and lightness differ using real pictures.
Color distribution analysis tips and common mistakes
- Don't expect hue from grays. A black-and-white photo has an empty hue histogram, and the tool says so. That is correct, not an error.
- Remember transparency. PNG and SVG files with transparent backgrounds are measured only on their visible pixels, so a logo on a clear background reflects the logo itself.
- Compare at the same resolution. Small differences can appear between Fast and Precise runs, so keep the setting constant when comparing images.
- Use Square root for flat images. A big background color can flatten every other bar on a linear scale.
- Screens are sRGB. Values describe what the browser decodes, so wide-gamut or print-profile colors may look different elsewhere.
- Need an exact pixel? Use the Image Color Picker for one sampled color, and convert codes with the Color Converter.
For the HSL model behind the saturation and lightness charts, the MDN page on the CSS hsl() function is a clear reference, and the HSL and HSV article explains how the models relate.
Once you know which hues dominate your image, build a scheme around them with the Color Harmonies Generator, or browse the full list of color tools for the next step.