A color harmony analyzer evaluates how well a set of colors work together by detecting harmony type, checking WCAG contrast ratios, and scoring saturation and lightness distribution. Add 2-6 colors to get a scored multi-dimensional report.
Enter Your Colors
Palette Preview
How We Score Color Harmony
- Harmony Type (20pts) — Recognized pattern (complementary/triadic/analogous)
- Contrast Ratio (20pts) — WCAG AA/AAA compliance between pairs
- Saturation Balance (20pts) — Consistent intensity levels across colors
- Lightness Distribution (20pts) — Good range from dark to light
- Temperature (20pts) — Consistent warm/cool with intentional accents
Color Wheel
Score Breakdown
How to Use the Color Harmony Analyzer
Color harmony analysis goes beyond checking whether colors look "nice" together — it evaluates whether a palette follows design principles that make it functional and accessible. This color harmony analyzer scores 5 dimensions and detects your palette's harmony pattern.
Step 1: Enter Your Colors
Add 2-6 colors using the hex input fields. You can type a hex code directly (e.g., #3b82f6) or use the color picker by clicking the swatch next to each input. Add more colors with the "+ Add Color" button (maximum 6). Click the trash icon to remove a color.
Step 2: Read the Harmony Type
The color wheel plots your colors as dots and labels the detected harmony pattern. Complementary colors sit 180 degrees apart — high energy, great for call-to-action contrasts. Analogous colors are adjacent (±30°) — calm and cohesive, ideal for backgrounds. Triadic colors (120° apart) offer vibrant balance. Split-complementary gives most of the contrast of complementary with less tension.
Step 3: Check Contrast Ratios
The contrast pairs section shows the WCAG contrast ratio between each adjacent color pair. WCAG AA standard requires 4.5:1 for normal body text and 3:1 for large text (18px+ or 14px+ bold). AAA requires 7:1. A palette where no pair achieves 4.5:1 will struggle with text readability.
Understanding Temperature Consistency
Color temperature divides the wheel into warm hues (reds, oranges, yellows — 0°-60° and 300°-360°) and cool hues (blues, greens, purples — 120°-240°). Palettes with consistent temperature feel intentional. One warm accent in a cool palette (or vice versa) scores well because it follows the classic accent principle. A random mix of warm and cool scores low.
FAQ
Is the Color Harmony Analyzer free?
Yes, completely free with no account required. All analysis runs in your browser — no colors are sent to any server.
What is color harmony in design?
Color harmony refers to how well colors work together visually. Complementary colors (opposite on the wheel) create high contrast and energy. Analogous colors (adjacent) feel calm and cohesive. Triadic schemes offer vibrant balance. The analyzer detects which pattern your palette matches.
How does the contrast ratio check work?
The analyzer computes the WCAG relative luminance formula for each color pair. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA requires 7:1 for normal text. The tool checks all adjacent pairs in your palette.
What does saturation balance mean for a color palette?
Saturation balance measures whether colors have similar intensity levels. A palette where all colors have similar saturation (e.g., all vibrant or all muted) feels intentional. Wild swings between a neon and a pastel look unplanned and chaotic.
How many colors should a color palette have?
Most UI design systems use 3-5 colors: a primary, secondary, accent, plus neutrals. Brand palettes often have 2-3 core colors. The analyzer accepts 2-6 colors. More than 6 creates visual noise unless you have a very deliberate system.
What is lightness distribution in a color palette?
Lightness distribution measures how well your palette spans from dark to light. A good UI palette needs dark colors for text, mid-tones for UI elements, and light colors for backgrounds. A palette of all mid-tones lacks hierarchy.