Drag anywhere on the wheel to set a base hue and saturation, then switch between the eight classic harmony rules. Every generated colour comes with an eleven-step lightness ladder, so you can see at a glance which steps are safe for text on white and which are decoration only.
#2E4057
Harmony rules are not aesthetic opinions — they are fixed geometric relationships on the wheel. Knowing what each one is for saves you from reaching for the same two every time.
Hues within about 60° of each other. Because nothing clashes, it is the default for dashboards, documentation and anything text-heavy. The risk is monotony — you usually need one accent from outside the arc to give the eye somewhere to land.
Hues 180° apart. The highest possible contrast on the wheel, which makes it the natural choice when one element has to win attention — a primary button on an otherwise quiet page. Used everywhere, it stops working.
The base plus the two hues flanking its opposite (roughly 150° and 210°). Nearly all of the complementary punch with far less optical vibration, which is why it survives in real interfaces more often than the pure pair does.
Three hues 120° apart. Balanced and energetic, and it stays lively even at low saturation. It is also the easiest rule to get wrong — three hues of equal weight fight. Let one dominate and use the other two sparingly.
Four hues 90° apart, forming a square. Rich and busy. It works when a single colour covers most of the surface and the remaining three are small accents; it fails badly when all four get equal area.
Two adjacent hues plus a complementary pair — sometimes called a softened split. More variety than analogous, less shouting than a straight complement. Good middle ground for marketing pages with several sections.
One hue at several lightnesses. This is the accessibility workhorse: because every step differs in luminance rather than hue, contrast is predictable and easy to reason about. Also the safest base for dark mode.
A single hue walked from near-black to near-white in even steps. This is how neutral ramps get built — the greys that look neutral almost always carry a few degrees of the brand hue in them.
They are geometry, not physics. Each rule is a fixed angular relationship on a colour wheel, and the underlying claim — that certain angular relationships look stable together — comes from centuries of painting practice rather than from a measured property of human vision. They are useful as starting points, not laws. Plenty of good palettes sit between two rules.
Because the hue differences that make a rule readable are being compressed. At very low saturation, a triad collapses into three similar greys and you lose the relationship entirely. If you need a quiet scheme, either raise saturation slightly or switch to monochrome, where the structure comes from lightness instead.
HSL lightness is arithmetic — 50% is simply the midpoint between black and white for that hue. Human perception disagrees: yellow at 50% looks far brighter than blue at 50%. That is why two colours with identical HSL lightness can have very different contrast ratios. For accessibility decisions, trust the measured ratio, not the L number.
Fewer than you think. A working product palette is usually one neutral ramp for surfaces and text, one brand hue, one semantic hue per state, and perhaps one accent. Five competitive hues is a mood board, not a design system — the ladders on this page matter more than the base set.
Interfaces need more than five colours. Hover states, disabled states, borders, subtle backgrounds and text-on-tint all want a slightly different step of the same hue. An eleven-step ladder gives you those variations without inventing new colours each time, and it keeps the scheme coherent because every step shares one hue and saturation.
