color palettesColor harmonies for websites: choose relationships, then assign roles
A harmony suggests which hues might belong together. It does not tell you which color should become a link, a page background or a readable label.
Reviewed 11 October 2026 · 3 min read
Start with the relationship you need
For a quiet editorial page, a small range of neighboring hues may be enough. For a primary action that needs emphasis, an opposing accent can give you a clearer contrast in hue. A dashboard with several kinds of information may need more colors, but that does not mean every color should have equal area or saturation.
Use the color explorer to try the relationships below with your exact hex. It shows HSL hue angles, RGB values and an exploratory OKLCH tonal scale. Keep the original hex when handing off the decision; rounded HSL or OKLCH notation may not reproduce every 8-bit channel exactly.
| Harmony | Rule | A useful starting task | Watch for |
|---|---|---|---|
| Analogous | Starting hue and ±30° | Related sections in a calm editorial design | Similar hues can merge without differences in lightness or shape. |
| Complementary | Starting hue and 180° | One primary direction with a contrasting highlight | Equal large areas of vivid opposing hues can compete. |
| Split complementary | Starting hue, 150° and 210° | A dominant hue with two secondary options | Three colors still need a hierarchy. |
| Triadic | 0°, 120° and 240° | An illustration-led or playful direction | Three distinct hues do not automatically make readable text pairs. |
| Tetradic | Four hues at 90° intervals | Exploring several accents before choosing a subset | Too many primary-looking actions can obscure the next step. |
| Monochromatic | One hue and saturation, varied lightness | A restrained interface with a consistent color identity | Adjacent shades may not distinguish a control or state. |
Worked example: a blue action and a yellow-green accent
Cobalt & Citrus pairs blue #3448C5 with yellow-green #D5EC59. The authored combination is not a mathematically exact hue-rotation preset; its useful distinction is the role assignment. Blue carries the action. Yellow-green provides a smaller supporting highlight.
Against its page #F5F6F0, the blue has 6.71:1 contrast; the yellow-green has 1.21:1. The second color needs a different role or adjustment before it becomes small text. Hue separation cannot replace that calculation. Inspect the accent pair and try a readable alternative.
Why the wheel and the generator can differ
The explorer uses HSL rotations so the rule is explicit and easy to inspect. HSL hue steps are not equal perceptual distances, and HSL lightness is not WCAG relative luminance. The generator explores OKLCH, then reduces chroma where needed to fit sRGB. The two tools answer different questions; a 180° rotation in one model does not promise the same hex as a 180° rotation in another.
Turn the result into a website
- Choose a harmony and open the complete set in the generator.
- Keep the useful colors locked. Add or adjust a sufficiently light page and dark reading color if the harmony is missing them.
- Assign page, surface, text, action and accent roles. Inspect the website preview and the measured pairs.
- Open the studio to build the other theme. Review hover, focus and status messages separately.
- Export the named tokens and retain the editable project, not just a screenshot.
For status or data categories, add explicit labels, symbols or patterns. Complementary hues can still be difficult for some visitors to distinguish. Color-vision inspection helps reveal questions; it is not a universal distinguishability test.
Method and sources
The angle presets above are this tool’s disclosed implementation of common design relationships, not an accessibility standard or a universal formula for beauty. See MDN’s HSL notation reference, Björn Ottosson’s Oklab description, and W3C’s use-of-color guidance. Cultural and personal color associations vary; test the actual design with its intended audience.
Our examples use original palette values and the WCAG 2.2 calculation. Full methodology and primary sources.
← All field notes