What is Color Harmony Analyzer?

Color Harmony Analyzer checks whether your colors work together based on color theory. It detects the harmony type (complementary, analogous, triadic, and more), scores how well they match, and offers tips to improve the palette.

The analyzer reads each hex into HSL, then measures hue distances on the colour wheel to detect complementary, analogous, triadic, split-complementary, tetradic, or monochromatic relationships. It also checks saturation and lightness spread, scores the palette from 0 to 100, and lists fix-it tips like darken for contrast or balance saturation, based on what looks off.

How to use

1. Add two or more colors by entering hex codes or using the color picker.
2. Check the harmony analysis to see the detected relationship type and compatibility score.
3. Review the suggestions, then export your refined palette.

When to use

• Validating a three-colour brand palette before locking style tokens.
• Choosing between two candidate colour sets pulled from a moodboard.
• Auditing a chart palette where every series needs distinct hues.

Result

A brand designer enters their three brand colors (#2D5F8B, #F4A623, #E8E1D5) and discovers they form a split-complementary harmony with an 87% compatibility score, with a suggestion to slightly warm the blue.

FAQ

What does the harmony score actually measure?

It combines how cleanly the hue angles match a known relationship (complementary at 180°, analogous within 60°, etc.), how balanced the saturation and lightness ranges are, and whether the palette has enough contrast. 70 and above is solid; 50 and below usually needs a tweak.

Why did it call my three colours "custom" instead of triadic?

Pure triadic colours sit exactly 120° apart on the hue wheel. If your three hues are at, say, 80° and 200° apart, the angles don't match a textbook pattern, so the analyzer labels it custom and still gives a score based on saturation, lightness, and contrast.

Should I always aim for a 100 harmony score?

Not always. A perfect score means the palette is textbook clean, which is great for charts and dashboards. Brand palettes often score 70 to 85 — a little tension makes them memorable. Use the score as guidance, not a target.

How many colours can the analyzer handle?

Practically two to seven. Two is the minimum to detect a relationship; past seven the harmony types stop being meaningful (most palettes would just be labelled custom). For data viz needing more colours, focus on lightness and saturation balance instead.

Can I export the palette for use in code or design tools?

Yes. The download button saves the hex codes and you can copy them all at once with a single click. Paste them straight into Figma's color styles, into CSS custom properties, or into a JSON tokens file for a design system.

Related Tools