What is the difference between complementary and split-complementary in the color harmony generator?

Complementary uses the base plus its exact opposite (+180°). Split-complementary swaps the opposite for the two hues flanking it (+150° and +210°), softening the contrast.

Why do all swatches share the same saturation and lightness?

Keeping S and L fixed isolates the hue rotation that defines each rule. If you want light/dark variants too, use the Color Theory Generator’s monochromatic mode after picking your harmony.

Are the palettes safe to use directly in a product UI?

They are mathematically harmonious, but real UI palettes also need contrast tuning. Pair the palette output with the Contrast Checker before finalising text-on-color combinations.

Why does my tetradic palette look unbalanced?

Tetradic palettes have two warm + two cool hues; pick one dominant and use the rest as accents. Equal usage will fight for attention.

Can I copy the palette as CSS variables?

Use Copy palette to get the hex and hsl values, then wrap each line in --color-1: ; for CSS variables. The Design System Generator can produce a fuller scale automatically.

Color Harmony Generator

Generate complementary, analogous, triadic, tetradic, split-comp, and square palettes from any base color.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this color harmony generator

Pick a base color with the color picker or paste a hex value.
Choose a harmony rule: complementary, analogous, triadic, tetradic, split-complementary, or square.
Press Generate palette to rotate the base hue and produce the matching swatches.
Read each swatch with its hex and hsl(...) values so you can paste straight into CSS.
Use Copy palette to grab the whole palette as plain text.

About this color harmony generator

The color harmony generator converts your base hex to HSL, then rotates the hue by the geometric offsets that define each classical harmony rule: complementary is +180°, analogous is ±30°, triadic is +120°/+240°, tetradic uses the rectangle (+60°/+180°/+240°), split-complementary uses the complement’s neighbours (+150°/+210°), and square spaces four hues at 90° apart. Saturation and lightness are kept constant so the resulting palette stays balanced.

Worked example: with base #3b82f6 (hsl(217, 91%, 60%)) and the triadic rule, the generator produces hsl(217, 91%, 60%) → #3b82f6, hsl(337, 91%, 60%) → #f63ba0, and hsl(97, 91%, 60%) → #62f63b. The three colors sit at exactly 120° intervals on the wheel and share saturation and lightness, giving the vibrant but balanced look that defines triadic palettes.

As a second example, using base #e11d48 (hsl(346, 77%, 49%)) with the split-complementary rule produces hsl(346, 77%, 49%) → #e11d48 as the base, hsl(136, 77%, 49%) → #1de13c as the first neighbour, and hsl(196, 77%, 49%) → #1db4e1 as the second — a vivid, lower-tension trio that gives the dominant red plenty of contrast without the harshness of a pure complement. Everything runs locally — no API call.

FAQ

What is the difference between complementary and split-complementary in the color harmony generator?: Complementary uses the base plus its exact opposite (+180°). Split-complementary swaps the opposite for the two hues flanking it (+150° and +210°), softening the contrast.
Why do all swatches share the same saturation and lightness?: Keeping S and L fixed isolates the hue rotation that defines each rule. If you want light/dark variants too, use the Color Theory Generator’s monochromatic mode after picking your harmony.
Are the palettes safe to use directly in a product UI?: They are mathematically harmonious, but real UI palettes also need contrast tuning. Pair the palette output with the Contrast Checker before finalising text-on-color combinations.
Why does my tetradic palette look unbalanced?: Tetradic palettes have two warm + two cool hues; pick one dominant and use the rest as accents. Equal usage will fight for attention.
Can I copy the palette as CSS variables?: Use Copy palette to get the hex and hsl values, then wrap each line in --color-1: <hex>; for CSS variables. The Design System Generator can produce a fuller scale automatically.