Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic palettes from one color.
Loading tool...
About Color Harmony Generator
Color harmony is a principle of color theory that produces visually pleasing combinations. Complementary colors sit opposite each other on the color wheel (180°) — high contrast, bold impact. Analogous colors are neighbors (±30°) for a cohesive, natural feel. Split-complementary uses two colors flanking the complement (±150°/±210°) for contrast with less tension. Triadic spaces three hues 120° apart for a vibrant, balanced look. Square takes four hues at even 90° intervals, while tetradic uses a rectangle — two complementary pairs at 60° and 180°/240° — for the same variety with one hue family dominant. Monochromatic varies lightness at a fixed hue for an elegant, unified theme. Copy any swatch hex or grab the generated CSS custom properties to drop straight into your stylesheet.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing a starting palette from one brand colour.
- Comparing complementary and analogous options side by side.
- Finding an accent that sits a deliberate distance from a base colour.
- Generating candidates to react to rather than starting blank.
- Building a palette with a defined relationship rather than by taste.
Frequently Asked Questions
- Why isn't red's complement green here?
- Because this uses the RGB colour wheel, where the opposite of red is cyan. Green is the artist's complement of red on the older RYB wheel taught in painting. Neither is wrong — they are different wheels, and screen work follows the RGB one, which is why digital complements often look unfamiliar.
- What is the difference between tetradic and square?
- Square takes four hues at even 90° steps. Tetradic uses a rectangle — two complementary pairs at uneven spacing, here 60° and 180°/240° — so one hue family stays dominant instead of all four competing. The two were previously identical in this tool; they now produce genuinely different palettes.
- Why do rotated hues look uneven in lightness?
- Because HSL hue is geometry, not perception. Rotating 120° from a blue keeps saturation and lightness numbers identical while the perceived brightness changes a great deal, since the eye is far more sensitive to green than blue. A triadic set is mathematically equidistant and visually is not.
- Should I use these colours straight from the palette?
- As a starting point. A harmony fixes the hue relationships and says nothing about proportion or contrast — the usual guidance is a dominant colour at roughly 60% of the surface, a secondary at 30% and an accent at 10%. Check every text pairing against contrast requirements before shipping.
- How does the monochromatic option differ from the rest?
- It never rotates the hue at all — it holds hue and saturation fixed and moves lightness, producing five steps around your colour. Lightness is clamped to 5–95% so the extremes stay recognisably tinted rather than collapsing to pure black and white.
Common errors and gotchas
- Treating a harmony rule as a guarantee, when contrast and context decide whether it works.
- Generating a palette without checking text contrast against each colour.
- Producing colours that collapse to the same appearance under colour vision deficiency.
- Using every generated colour, where a palette usually needs one or two accents.
- Working in a space where equal hue steps are not perceptually equal.