Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Brand Color in Interfaces

A brand colour chosen for a logo usually needs adjustment before it can survive as an interface accent.

Definition

Brand colour is the hue associated with an identity. Interface use imposes constraints that brand guidelines rarely anticipate: contrast requirements, dark mode, disabled and hover states, and coexistence with semantic colours.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Common conflicts, and how to resolve them
  3. In practice
  4. Continue from here

Common conflicts, and how to resolve them

  • The brand colour fails contrast as a button fill with white text. Resolve by building a ramp and using a darker step for interactive surfaces, keeping the original for large brand moments.
  • The brand colour is red or green, colliding with error or success. Resolve by shifting the semantic hues slightly and always pairing them with icons.
  • The brand colour is unusable in dark mode. Resolve by defining a separate dark-mode step, usually lighter and less saturated.
  • The brand colour is used everywhere and stops signalling interactivity. Resolve by restricting it to interactive elements and brand moments only.

In practice

Yellow brands

Brand systems

A bright yellow cannot carry white text at any acceptable contrast. The usual resolution is a dark text colour on yellow for brand surfaces, plus a much darker derived step for interactive elements.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Related concept

Connected closely enough to change how you apply this.