Colour

Our palette consists of nine colours. Use NIHR Navy for your primary colour and ensure all colour combinations with text are accessible.

View all colours

Some colours have special meanings within NIHR branding, or within the Design System. You should apply them for their intended purpose.

NIHR primary colour

Use NIHR Navy more prominently than any other colour, and in the most prominent positions.

NIHR Navy 100% #193E72 $navy-100 View with all NIHR colours

When to use NIHR Navy

For NIHR branding
As the most-used colour on a page
For text on a white background
As a background behind white text

Attention

Use NIHR Coral to direct the user's attention to something important, such as the start of a transaction, a navigational cue, or an error.

NIHR Coral 100% #EA5D4E $coral-100 View with all NIHR colours

When to use NIHR Coral

As a call to action
As a backdrop for a container with its own background that contrasts with its content
For error messages

When not to use NIHR Coral

For text, or text backgrounds

Interaction focus

Use NIHR Yellow to indicate that an element on the page is currently focused. This helps people who navigate pages using their keyboard, or who have certain visual impairments.

NIHR Yellow 100% #FED47A $yellow-100 View with all NIHR colours

Learn more about accessible user interactions

When to use NIHR Yellow

Always, for the currently focused element

When not to use NIHR Yellow

For any other purpose than to indicate interaction focus

Accessibility

You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).