Color & Design·5 min read

Color Harmony Basics: Seven Palette Formulas

A palette that works is rarely an accident; it's geometry. Color harmony comes 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 seven formulas the Color Palette Generator shows, converts #6366F1 into several 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 free Color Palette Generator 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 classic formulas below have lasted in art instruction for a long time because they map to how opposed and neighboring hues behave perceptually.

Color harmony basics: seven 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 complementary softens the complement by taking the two hues at 150 and 210 degrees instead of the exact opposite.

Two four-color schemes add range. Tetradic, also called rectangle, uses two complementary pairs at 0, 60, 180 and 240 degrees. Square spaces four hues 90 degrees apart. Both give you more colors to assign, but they need one dominant hue or they get busy fast. Monochromatic skips hue variation entirely and steps lightness up and down from the base.

Every hue-based formula keeps the base color's saturation and lightness while rotating hue, which is why the results feel like siblings rather than strangers. The Color Palette Generator shows all seven at once from a single base color, plus a shades set, so you can compare them side by side instead of switching views. It can space the hues on the screen RGB wheel or the painter's RYB wheel, and any harmony can be sent to the space bar generator above it for locking and fine tuning.

Complementary vs analogous palettes in practice

Choosing between these two is really a decision about energy. Complements vibrate; they demand attention where they meet, which makes them well suited to 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

Enter the indigo #6366F1 as the base color and the complementary card returns #F1EE63, a sharp yellow sitting exactly 180 degrees away. The triadic card 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 card 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. Pick a Copy format first, HEX list, CSS variables, JSON or Tailwind colors, and Copy all on any card gives you that set in the chosen format, ready for tokens or a config file.

Palettes for UI design: give every color a job

A generated palette works well in an interface 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 cards 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 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 builds structure from a single input color. When you want to explore hue space freely before committing to a base, use the Color Wheel, which shows eight harmonies live as you drag. If your starting point is a photo or logo rather than a single color, Color Palette from Image pulls the main colors out of it. 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.