Color Harmony Generator

What is color harmony?

Color harmony is the art of picking palettes whose hues feel intentional rather than random — and behind the art is a simple geometry. The color wheel arranges hues in a circle by their position in the visible spectrum; harmonious palettes are sets of points on that circle whose relative angles produce reliable visual relationships. Complementary pairs (opposite each other) maximize contrast and energy. Analogous sets (close together) read as calm and unified. Triadic trios are vibrant but balanced. Each scheme is a tested formula, not a hard rule — they give you a starting point that you can tune from there.

How to use this generator

Choose a base color and pick a scheme. The grid below shows every color in the harmony, with hex, RGB and HSL values for each. Click any card to copy its hex; click Copy below the code block to grab a ready-to-paste :root declaration of CSS custom properties. Switch schemes to compare — the same base hue produces wildly different moods through different geometric relationships.

Picking the right scheme for the job

Complementary works for call-to-actions and warning systems where contrast is the point. Analogous is unbeatable for hero gradients, mood pieces and natural-feeling brands. Triadic is great for kid-product UI, gaming brands and infographics with three categorical groups. Tetradic and square give you four colors but can fight if all four are used at equal weight — pick a dominant, an accent, and use the other two sparingly. Monochromatic palettes pair beautifully with one strong neutral and never look dated.

The math: hue rotation

Each scheme is a rotation around the HSL hue ring, leaving saturation and lightness unchanged from the base. complementary is (h + 180°). split-complementary takes the base plus (h + 150°) and (h + 210°) — a softer alternative to pure complement. analogous is (h − 30°, h, h + 30°). triadic is (h, h + 120°, h + 240°). tetradic is the rectangle at (h, h + 60°, h + 180°, h + 240°). square spaces four points evenly: (h, h + 90°, h + 180°, h + 270°). monochromatic keeps the hue and varies lightness through five evenly spaced steps.

Cheat sheet: scheme to mood

Complementary — energetic, attention-grabbing, polarizing. Split-complementary — bold but softer than full complement; great for first-time palette builders. Analogous — calm, harmonious, ideal for nature and wellness brands. Triadic — playful, balanced, vibrant. Tetradic — versatile, rich, needs a dominant color. Square — bold and balanced; harder to pull off than tetradic. Monochromatic — minimal, sophisticated, accessibility-friendly when paired with a neutral.

Frequently asked questions

How do I pick a base color?

Start with the brand's most-used hue — or, if you're starting from scratch, pick a color whose mood matches the brand: warm yellows and oranges for energetic, cool blues and teals for trustworthy, deep reds for serious, greens for natural. The scheme then propagates that mood across the secondary slots.

Why do my colors look washed out in monochromatic mode?

Monochromatic mode varies lightness while keeping hue and saturation fixed. If your base color has low saturation, the lighter and darker variants compress toward gray. For richer monochromatic palettes, start from a saturated base and consider tweaking saturation alongside lightness in a paint app.

Should I use all four colors of a tetradic palette equally?

Almost never. Use the 60-30-10-10 rule: 60% dominant color, 30% secondary, 10% and 10% for the two accents. Equal-weight four-color palettes feel chaotic — give one color the spotlight and the others supporting roles.

Are these schemes scientifically accurate?

They're geometrically defined, not perceptually calibrated. The HSL color wheel doesn't reflect how the human eye perceives hue distance — yellow and green appear closer than the math suggests, while greens span a much wider perceptual region than blues. Use the schemes as starting points and adjust by eye.

Can I save my palette?

Click Copy on the CSS variables block to put the palette on your clipboard, then paste into your project's stylesheet. We don't store palettes server-side — everything is local to your browser.

What's the difference between split-complementary and complementary?

Pure complementary uses two colors directly opposite on the wheel — maximum contrast but visually intense. Split-complementary swaps the single opposite for two colors flanking it (±30° from the opposite), softening the contrast while keeping the energy. It's the easier scheme to use if you've never built a palette before.

Color Harmony Generator