Color Palette
Harmonies built from a single seed color
Colour harmonies are relationships on the colour wheel rather than matters of taste. A complementary pair sits opposite, 180 degrees apart, and produces maximum contrast in hue. Analogous colours sit adjacent, within about 30 degrees, and read as calm because they share a family. Triadic and tetradic schemes space three or four hues evenly around the circle.
Starting from one seed colour and deriving the rest keeps a palette coherent in a way that picking swatches individually rarely does. What harmony cannot tell you is whether text will be legible on a background: that is a question of contrast ratio, which depends on relative luminance and has to be checked separately.
How to use it
- Choose a seed colourStart with the one colour you are committed to — a brand hue, or a shade you already use for primary actions. Everything else is derived from it.
- Compare the harmoniesComplementary, analogous, triadic and tetradic sets are generated together, so you can see which relationship suits the design rather than guessing at one.
- Copy the values you needEach swatch gives hex and HSL. HSL is the more useful form to keep in a stylesheet, because adjusting lightness or saturation later becomes a single number change.
- Check contrast before you commitA harmonious palette can still be unreadable. Verify any text and background pairing against WCAG contrast requirements before it reaches a component.
Frequently asked questions
What are complementary and analogous colours?
Complementary colours sit opposite one another on the wheel — roughly 180 degrees apart — giving the strongest hue contrast, which is why they work for an accent against a dominant colour. Analogous colours sit next to each other within about 30 degrees and share a visual family, producing a quieter, more unified feel with less separation between elements.
How many colours should a palette have?
Fewer than instinct suggests. One dominant colour, one accent and a neutral range covers most interfaces; semantic colours for success, warning and error are additions rather than part of the harmony. Every extra hue is another decision every future component has to make.
Why do my colours look different on another screen?
Displays vary in gamut and calibration, and a hex value is an instruction rather than a guarantee. A colour that reads as a rich navy on a wide-gamut laptop can flatten to grey-blue elsewhere. Judge palettes on more than one screen, and never rely on a subtle hue difference to convey meaning.
Does a harmonious palette pass accessibility checks?
Not automatically — the two are unrelated. Harmony is about hue relationships; accessibility is about luminance contrast. Two complementary colours at similar lightness look vivid together and can fail contrast requirements badly. Always verify text pairings against the 4.5 to 1 ratio for body text.
Should I store colours as hex or HSL?
HSL is easier to work with, because a hover state or a disabled variant becomes a change to the lightness number rather than a fresh value from a picker. Hex remains the interchange format everyone recognises, so tools generally show both. Newer notations such as OKLCH go further by making perceived lightness consistent across hues.