TOOLBuild a color scheme in seconds
Great colour schemes follow simple relationships on the colour wheel. Pick a base colour and this generator builds the classic harmonies — complementary, analogous, triadic, tetradic, split-complementary and monochromatic — each with copy-ready HEX codes for your CSS or design tool.
The schemes explained
- Complementary — two colours opposite on the wheel (180°); high contrast.
- Analogous — neighbours on the wheel (±30°); harmonious and calm.
- Triadic — three colours 120° apart; balanced and vivid.
- Tetradic — four colours in two complementary pairs; rich but busy.
- Split-complementary — a base plus the two neighbours of its complement; strong but softer.
- Monochromatic — one hue at different lightness levels.
Next steps
Check any pairing is readable with the contrast checker, generate lighter and darker variants with the shades & tints generator, or turn a scheme into a background with the gradient generator.
Palettes are generated by rotating hue on the colour wheel; colour harmony is a guide, not a rule — trust your eye for the final choice.
Frequently asked questions
What is a complementary color scheme?
Complementary colors sit opposite each other on the color wheel — 180 degrees apart in hue. They create strong contrast and a vibrant look, useful for making one element stand out against another.
What is the difference between triadic and analogous?
Triadic uses three colors evenly spaced 120 degrees apart for a balanced, vivid palette. Analogous uses colors next to each other on the wheel (about 30 degrees apart) for a harmonious, low-contrast look.
How are the palettes generated?
The base color is converted to HSL, then the hue is rotated by set angles for each scheme while keeping saturation and lightness, which produces classic color-wheel harmonies. Monochromatic instead varies lightness at the same hue.