Colour

Always use the GOV.UK colour palette.

Colour contrast

You must make sure that the contrast ratio of text and interactive elements in your service meets Web Content Accessibility Guidelines (WCAG 2.2) success criterion 1.4.3 Contrast (minimum) level AA.

The WCAG 2.2 criterion for Contrast (minimum) is the same as WCAG 2.1.

Functional colours

If you are using GOV.UK Frontend or the GOV.UK Prototype Kit, define colours for essential elements by function, using our Sass variables, rather than copying hexadecimal (hex) colour values.

This means that your service will always use the most recent colour palette whenever you update.

Define colours using govuk-functional-colour

Use the govuk-functional-colour function, along with the variable for what you need.

For example, use govuk-functional-colour("brand") rather than #1d70b8.

Only use the variables in the context they’re designed for. In all other cases, you should reference colours directly from the GOV.UK web palette.

For example, if you wanted to use red, you should use govuk-colour("red") rather than govuk-functional-colour("error").

Text

govuk-functional-colour("text") #0b0c0c
govuk-functional-colour("secondary-text") #484949

Links

govuk-functional-colour("link") #1d70b8
govuk-functional-colour("link-hover") #0f385c
govuk-functional-colour("link-visited") #54319f
govuk-functional-colour("link-active") #0b0c0c

Border

govuk-functional-colour("border") #cecece
govuk-functional-colour("input-border") #0b0c0c

Focus state

govuk-functional-colour("focus") #ffdd00 Only use this colour to indicate which element is focused on. For example, when a user tabs to an element with their keyboard.
govuk-functional-colour("focus-text") #0b0c0c

Error state

govuk-functional-colour("error") #ca3535 Use for error messages

Success state

govuk-functional-colour("success") #11875a Use for success messages

Brand colour

govuk-functional-colour("brand") #1d70b8

GOV.UK web palette

The GOV.UK web palette follows the GOV.UK brand guidelines. Use these colours for supporting elements in your service like illustrations, or in custom components where appropriate.

The web palette includes:

  • primary colours
  • tints: lighter variants of each colour
  • shades: darker variants of each colour

Add colours using using govuk-colour

Reference primary colours from the palette directly using the govuk-colour function.

For example: color: govuk-colour("blue")

Reference tints and shades using the $variant option.

For example: govuk-colour(‘red’, $variant: ‘tint-25’) or govuk-colour(‘green’, $variant: ‘shade-50’)

Most colours include these variants:

  • tints at 25%, 50%, 80% and 95%
  • shades at 25% and 50%

Black, white and brown have fewer tints and shades.

See _colours-palette.scss for colour values and their tints and shades.

When to use the GOV.UK web palette

In [February 2026], we changed the purpose of the govuk-colour function for use with the GOV.UK web palette. Previously, the function used a more generalised set of common colours.

If you already use the govuk-colour function, the GOV.UK web palette colours will now apply automatically.

Read the GOV.UK Frontend v6.0 release notes for more guidance on what’s changed, and what you need to do if your service used the govuk-colour function in any earlier versions.

You should no longer use the govuk-colour function, the GOV.UK web palette and its colours:

  • if your product or service is not part of the GOV.UK proposition
  • for any other purpose

Colour palette for charts

When creating charts, use the colour palettes and guidance set out in the Government Analysis Function Data visualisation: colours guidance.

The colour palettes recommended by the Government Analysis Function are based on the colours shown on this page. They’ve made some slight changes to improve colour contrast, in line with the Web Content Accessibility Guidelines (WCAG).

Organisation colours

You can find brand colours for government departments and organisations in the _colours-organisations file in GOV.UK Frontend.

This file is maintained on a best effort basis and is assembled from a number of sources, including:

Help improve this style

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.