Skip to content
Colour Lab

Harmony Generator

Color harmony generator: build complementary, triadic, analogous, split-complementary, tetradic and monochromatic schemes from one colour.

  • #color harmony
  • #complementary colors
  • #color wheel generator
  • #colour harmony
  • #complementary
  • #triadic
  • #analogous
  • #palette
100% client-side

Runs in your browser. Your data never leaves this device.

The Workbench
Harmony Generator — workspaceLive
ComplementaryTwo colours opposite on the colour wheel
Network requests0
Bytes uploaded0
Trackers fired0
The Guide

About Harmony Generator

/01 Building a colour scheme from one colour

Pick a base colour and get the classical harmonies derived from it — complementary, triadic, analogous, split-complementary and tetradic. Each is a different rule for choosing hues that sit at fixed angles around the colour wheel.

Starting from one colour and deriving the rest keeps a palette coherent, which is much harder to achieve by picking swatches one at a time.

/02 Which harmony to reach for

Analogous schemes use neighbouring hues and feel calm and unified, but offer little contrast for emphasis. Complementary pairs sit opposite each other and give maximum separation — strong for calls to action, exhausting across large areas.

Split-complementary keeps most of that contrast while softening the clash, and triadic schemes stay vivid and balanced. A common approach is to let one hue dominate, use a second for support, and reserve the opposite hue for the few things that must stand out.

/03 What color harmony means

Color harmony is the idea that some colour combinations look balanced because of where the colours sit on the colour wheel. The relationships are geometric: colours directly opposite each other, next to each other, or evenly spaced around the wheel tend to work together, which gives you a reliable starting point instead of trial and error.

Pick one base colour and this generator builds every classic harmony from it at once. Complementary uses the colour opposite, for maximum contrast. Analogous uses neighbours, for calm schemes. Triadic spaces three colours evenly, for lively but balanced palettes. Split-complementary pairs the base with the two colours beside its opposite, softer than a straight complementary. Tetradic uses four colours in a square, and monochromatic keeps one hue at different lightness levels. Compound, double complementary, pentadic and golden ratio variations are there too for less common schemes.

/04 Turning a harmony into a usable palette

A harmony tells you which hues belong together, not how much of each to use. Most successful designs follow a 60-30-10 split: one dominant colour for large areas, a secondary colour for supporting elements, and a small amount of accent for buttons and highlights.

Equal amounts of complementary colours tend to vibrate uncomfortably, so let one lead and use its opposite sparingly. Adjust lightness freely, since a harmony still reads as harmonious when one colour is pale and another deep. Then check text colours for contrast separately, because a harmonious pair can still fail readability.

FAQ

Questions about Harmony Generator.

What is a complementary colour?
The hue directly opposite on the colour wheel, 180 degrees away. It produces the strongest contrast available between two hues, which makes it effective in small doses and overwhelming in large ones.
Which harmony works best for a website?
Analogous or split-complementary for the bulk of an interface, with a complementary accent reserved for actions you want noticed. Whichever you choose, check the pairs you will actually use for text against the contrast requirements.
Do these palettes guarantee accessible contrast?
No. Harmony is about hue relationships, not legibility. Run any foreground and background pairing through a contrast checker before committing to it for text.
What are the types of color harmony?
The main ones are complementary, analogous, triadic, split-complementary, tetradic and monochromatic. Each describes a fixed relationship between colours on the colour wheel, and this generator creates all of them from one base colour.
What is the difference between complementary and split-complementary?
Complementary pairs a colour with its exact opposite on the wheel. Split-complementary pairs it with the two colours on either side of that opposite, keeping strong contrast but with less tension.
Which color harmony is easiest to use?
Analogous and monochromatic schemes are the hardest to get wrong, because their colours are closely related. Complementary and triadic schemes are more striking but need one colour to dominate.
Related
Colour Converter

Convert hex to RGB, and between HSL, OKLCH, LAB, LCH and OKLAB, with a colour picker and every format shown at once.

hex to rgbrgb to hexcolor code converter
Contrast Checker

WCAG contrast checker: test any text and background colour pair against WCAG 2.1 AA and AAA ratios, with a live preview.

contrast checkerwcag contrastcolor contrast checker
Tailwind Shade Generator

Tailwind color palette generator: turn one colour into a full 50 to 950 shade scale, as a Tailwind config or CSS variables in hex or OKLCH.

tailwind color palettetailwind color generatortailwind shades
Gradient Generator

CSS gradient generator for linear, four-corner and mesh gradients with optional grain. Copy the CSS or export a PNG background.

gradient generatorcss gradientbackground gradient generator
Pixel Picker

Color picker from image: upload a photo or screenshot and sample the exact hex colour of any pixel with a magnified zoom loupe.

color picker from imagehex color from imageimage color picker
Palette Extractor

Color palette from image: extract dominant, vibrant, muted, warm or cool colours from any photo, with hex codes to copy.

color palette from imageextract colors from imageimage to color palette
Palette Generator

Color combination generator: create colour palettes from a seed colour with multiple strategies, lock colours you like, and export them.

color combination generatorcolor palette generatorcolor scheme generator
Palette Collection

Browse 284 curated color palettes across artistic, nature, vintage, modern, soft, bold, seasonal and monochrome styles, and copy any colour.

color palettescolor palette ideashex color palettes
Colour Blindness Simulator

Color blindness simulator: preview an image or colour as people with protanopia, deuteranopia, tritanopia and five other colour vision types see it.

color blindness simulatorcolor blind simulatorred green color blindness