Interaction of colour in components

Components and colours don’t exist in isolation - they interact as part of a larger, interconnected system. 

When two colours are placed next to each other, your eyes don’t see them exactly as they are. Instead, your brain adjusts how it perceives them to create contrast. This is called simultaneous contrast.

To support the user experience, colours need to be combined wisely so that they work together well, do not overwhelm, and communicate the same kind of information everywhere in the interface.

Nielson Norman Group

  • Consistency and cohesion

    Clear colour guidelines keep components connected and create a cohesive, intentional system

  • Accessibility and visual comfort

    Thoughtful colour pairings reduce clashes, improve legibility, and support inclusive design.

  • Scalability and confidence

    Shared principles help teams make confident colour choices as new components are added

Best practices

Thoughtful colour choices help create interfaces that feel clear, balanced, and visually comfortable. By considering how hues interact within real components and layouts, designers can avoid unnecessary tension and support a more cohesive user experience.

Don't

  • Don’t judge a color by its hex code: judge it by how it behaves with others.
  • Don't group strong complementary colors together unless you are limiting the interaction to a single pair : Like blue and orange, or red and green, to avoid the colours clashing
  • Don’t select colors without testing: test them in real UI contexts to ensure colour combinations feel clear and not visually cluttered

Bad colour selections:

or

Do

  • Use analogous colours. Neighbouring hues create less perceptual tension resulting in smoother, more cohesive transitions.
  • Use more muted colours: Reduce visual intensity and create a calmer, more balanced interface
  • Limit red usage: Shift from dominant use to small, intentional accents
     

Good colour selections:

or

Examples of colour interactions

So even though the color values are identical, they appear different depending on their surroundings.