Color & Design·4 min read

Color Harmony Basics: Five Palette Formulas That Work

A palette that works is rarely an accident; it's geometry. Color harmony basics come down to a single idea: choose angles on the hue circle and keep everything else consistent. Rotate a base color 180 degrees and you get its complement, 30 degrees and you get a quiet neighbor, 120 and you get a bold triad. This guide walks the five classic formulas, converts #6366F1 into each of them with real hex output, and explains which palette suits a product UI, which suits a chart, and which suits a poster.

Open the tool All insights

What a palette formula actually encodes

Angles, not taste.

When a landing page feels coordinated, there's usually a rule underneath: its colors sit at deliberate angular distances on the hue circle while sharing saturation and lightness. When a page feels off, some color is usually breaking that geometry, close enough to another hue to clash but not far enough to contrast.

This is good news for anyone who doesn't trust their eye. You don't need taste to build a defensible palette; you need a base color and a formula. The five formulas below have survived a century of art instruction because they map to how opposed and neighboring hues behave perceptually.

Color harmony basics: five relationships from one hue

Complementary takes the base plus the hue 180 degrees opposite, maximum tension, natural accent structure. Analogous takes the neighbors 30 degrees to either side, low tension, reads as one mood. Triadic spaces three hues 120 degrees apart, balanced but lively. Split softens the complement by taking the two hues at 150 and 210 degrees instead of the exact opposite. Monochromatic skips hue variation entirely and steps lightness up and down from the base.

Every one of these preserves the base color's saturation and lightness while rotating hue, which is why the results feel like siblings rather than strangers. That's also the entire trick a color palette generator performs, just faster than a human with a wheel and a calculator.

Complementary vs analogous palettes in practice

The complementary vs analogous palettes decision is really a decision about energy. Complements vibrate; they demand attention where they meet, which makes them superb for call-to-action buttons against a dominant brand color and exhausting as a fifty-fifty split across a whole page. The classic deployment is asymmetric: the base everywhere, the complement rationed to the few elements that must pop.

Analogous schemes go the other way. Because neighboring hues share an undertone, they read as calm and cohesive, ideal for backgrounds, section bands, and dashboards that people stare at for hours. Their risk is monotony: without a lightness spread or a foreign accent color, an analogous page can feel like fog.

A worked palette from base color #6366F1

Feed the indigo #6366F1 into the palette generator and the complementary tab returns #F1EE63, a sharp yellow sitting exactly 180 degrees away. The triadic tab returns #F16366 and #66F163, a coral red and a spring green 120 degrees to either side. Notice the hex digits reshuffling: rotating hue by exact thirds of the circle permutes the channel values, which is a neat visual proof that harmony is arithmetic.

The monochromatic tab keeps the indigo hue and steps lightness, producing two paler tints above the base and two deeper shades below, a ready-made scale for hover states, borders, and tinted backgrounds. Copy all on any tab hands you the full set as uppercase hex, ready for tokens.

Palettes for UI design: give every color a job

Generated palettes for ui design work best when each swatch is assigned a role before it touches a screen. A common split: the base as primary brand color, one monochromatic shade for hover, a pale tint for selected states and backgrounds, the complement or a split hue as the accent, and neutrals doing the remaining work. The old 60-30-10 proportion, dominant, secondary, accent, is a decent default for how much surface area each role gets.

Roles also keep growth sane. When a new feature needs a color, it asks which role applies instead of inventing swatch number fourteen, and the palette stays a system instead of becoming an inventory.

Palette mistakes that make a scheme clash

When a generated scheme still looks wrong, one of these is usually why:

Deploying a complementary pair at equal strength, so the page vibrates instead of directing attention.
Starting from a base with extreme lightness, which leaves monochromatic steps nowhere to go but clipped white or black.
Keeping every harmony color at identical lightness, which makes even distinct hues blur together at a glance.
Skipping the readability check, since harmony rules know nothing about whether text survives on a colored fill.
Mixing swatches from different harmony tabs ad hoc, which abandons the geometry that made each set coherent.

Two palette generator habits that save rework

Feed the generator a base in the middle lightness range, roughly 40 to 65 percent, so every formula has room to move in both directions. If your brand color is very dark or very pale, generate from a mid-tone version of the same hue and reintroduce the extreme as a tint or shade afterward.

Second, copy the whole palette and evaluate it in context, on a real screen mock, before falling in love. Swatches lie on a neutral gray grid; the same colors behave differently next to photography, data, and text.

Where this palette generator fits among the color tools

The Color Palette Generator optimizes for aesthetic structure from a single input. When you want to explore hue space freely before committing to a base, spin the Color Wheel, which shows the same four harmonies live as you drag. When you've settled on candidates, the Color Contrast Checker tells you whether text survives on them, and the Color Picker converts any swatch into RGB, HSL, or OKLCH for your codebase.

And if the palette must clear WCAG ratios by construction, for charts or design tokens, generate it with the Accessible Color Palette Generator instead and treat harmony as the second constraint rather than the first.