Interaction of colour in components

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

When two colors 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.

 

  • 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

For example:

  • A gray square next to a bright red background might look slightly greenish, because green is red’s opposite.
  • The same gray placed on a blue background might look a bit warmer or yellowish.
  • A muted color next to a very strong color might look duller than it actually is.

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

 

 

 

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 Norma Group

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 place strong complementary hues next to each other: 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

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