Color

Building a UI Color System

Creating a consistent palette with a brand color, shades, and semantic roles

Key Insight

A UI color system starts with one brand color applied consistently to interactive elements. From that single hue, create a monochromatic scale using the HSB (Hue, Saturation, Brightness) system — varying saturation and brightness while keeping the hue constant produces a coherent family of shades. Greys are not neutral — add a tinge of the brand hue to make them feel intentional and cohesive.

Key Points

  • •One primary brand color applied to all interactive elements creates a learnable pattern
  • •HSB shading: keep hue constant, reduce saturation and increase brightness for lighter shades
  • •Monochromatic palette: 5 shades from darkest (text) to lightest (background tint)
  • •Tinted greys: add 5-10% brand hue saturation to neutrals for cohesion
  • •Dark mode: invert brightness scale; reduce saturation slightly for comfortable viewing

Guidelines

  • ✓Apply brand color consistently to all clickable elements to set a clear affordance pattern
  • ✓Use HSB (not RGB or hex) when creating color variations — it's more intuitive
  • ✓Create a 5-step shade scale for each key color: heading/body/secondary/border/background
  • ✓Document which shade is for which purpose — don't leave it to judgment
  • ✓Verify every shade pair used for text meets contrast requirements

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics