Tools
Colour harmony generator
Generate complementary, analogous or triadic schemes from a base colour.
About this tool
Start from a single colour and this tool gives you the ones that go with it according to colour theory: its complement, its analogous neighbours, a triad, a square, a monochromatic scheme and some less common options such as pentadic or golden-ratio spacing. It is useful for choosing a brand’s accent colour, rounding out a website palette or finding the right contrast for a button or a chart.
Choose the base colour with the picker or type its HEX code. Then pick one of the 12 harmonies: the wheel shows where each colour falls and the table lists their codes with the hue rotation from the base (+180°, +120°…). Click any swatch to copy it, or copy every colour at once or as CSS variables. Further down, “All harmonies” lets you compare all 12 at a glance.
The maths runs in your browser and no data is sent anywhere. Colours are generated in the OKLCH space: the lightness and chroma of the base colour are kept and only the hue is rotated, which gives combinations that look more balanced than the classic HSL wheel. Some very saturated colours can fall outside the sRGB gamut and are clipped to the nearest match, so it is worth checking them.
Frequently asked questions
What is the complementary colour of a colour?
It is the colour directly opposite on the colour wheel, 180° round in hue. Enter your colour, choose “Complementary” and its code is ready to copy.
What is the difference between analogous and complementary colours?
Analogous colours are neighbours on the wheel (±30° here) and make gentle combinations; complementary colours are opposites and give maximum contrast. A common mix is analogous colours for the base with a complementary accent, which is exactly what “Analogous with accent” does.
Why does the complement differ from other tools?
Many tools rotate the hue in HSL; this one works in OKLCH, which tracks how we actually perceive colour more closely. The result can differ a little, though both are correct within their own model.
What is a triadic colour scheme?
Three colours spaced evenly round the wheel, 120° apart. It produces lively, balanced combinations and usually works best when one colour leads and the other two support it.