Gamut Bench
← All color guides

Design & development

How to use a color wheel for UI palettes

Learn how to use a color wheel to choose analogous, complementary and triadic colors, then assign and test interface roles.

Analogous-30° / 0° / 30°
Complementary0° / 180°
Triadic0° / 120° / 240°
Relative hue positions on an OKLCH wheel. The numbers describe angle relationships, not paint mixtures or a guarantee of readable text.

Choose a relationship before adding colors

A color wheel helps pick hue relationships. It does not decide which color belongs on a button, which surface supports small text, or how much of each color to use. Start with a base hue and a specific interface role.

Analogous hues sit near each other and can give related sections a consistent feel. A complementary pair uses opposite hue positions for a distinct accent. A triadic relationship uses three evenly spaced positions when more categories need separation.

Turn the swatches into roles

  1. Open the color wheel, set your base hue and compare harmony choices. Gamut Bench uses OKLCH; a traditional paint wheel can produce different pairs.
  2. Pick one primary action color. Reserve the other hues for a named purpose rather than giving every swatch equal screen area.
  3. Add a restrained background and readable text color with the palette generator. Preserve required colors with the lock controls.
  4. Test the palette on a real component: an action, supporting text and an error state. A row of attractive swatches is not enough to judge the design.

For example, use a blue family for the primary action and a warm accent for a selected item. Keep body text on a neutral surface. This is an illustrative allocation, not a rule that blue and orange automatically pass contrast checks.

Validate meaning and readability separately

Test every foreground against its actual background. Complementary hues may still have similar luminance and fail for small text. Add a label or icon to errors and statuses so hue is not the only signal.

For dark mode, keep the role names but revisit the values: inverting every color does not establish hierarchy or contrast. Preview both modes using the theme generator, then verify the target interface.

Before delivery, name the roles, record the tested pairs, and export the values from your project. Keep unused exploration colors out of the final implementation so another developer can tell which values are intentional.

Reference: Adobe: color wheel relationships.