Visual elements

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.

Main colours

If you are using GOV.UK Frontend or the GOV.UK Prototype Kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. For example, use $govuk-brand-colour rather than #1d70b8.

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

Only use the variables in the context they’re designed for. In all other cases, you should reference the colour palette directly. For example, if you wanted to use red, you should use govuk-colour("red") rather than $govuk-error-colour.

Text

$govuk-text-colour #0b0c0c
$govuk-secondary-text-colour #505a5f

Links

$govuk-link-colour #1d70b8
$govuk-link-hover-colour #003078
$govuk-link-visited-colour #4c2c92
$govuk-link-active-colour #0b0c0c

Border

$govuk-border-colour #b1b4b6
$govuk-input-border-colour #0b0c0c

Focus state

$govuk-focus-colour #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-focus-text-colour #0b0c0c

Error state

$govuk-error-colour #d4351c Use for error messages

Success state

$govuk-success-colour #00703c Use for success messages

Brand colour

$govuk-brand-colour #1d70b8

Colour palette

Use these colours for supporting materials like illustrations, or in custom components where appropriate.

To reference colours from the palette directly you should use the govuk-colour function. For example, color: govuk-colour("blue").

Avoid using the palette colours if there is a Sass variable that is designed for your context. For example, if you are styling the error state of a component you should use the $govuk-error-colour Sass variable rather than govuk-colour("red").

If you need to use tints of this palette, use either 25% or 50%.

govuk-colour("red") #d4351c
govuk-colour("yellow") #ffdd00
govuk-colour("green") #00703c
govuk-colour("blue") #1d70b8
govuk-colour("dark-blue") #003078
govuk-colour("light-blue") #5694ca
govuk-colour("purple") #4c2c92
govuk-colour("black") #0b0c0c
govuk-colour("dark-grey") #505a5f
govuk-colour("mid-grey") #b1b4b6
govuk-colour("light-grey") #f3f2f1
govuk-colour("white") #ffffff
govuk-colour("light-purple") #6f72af
govuk-colour("bright-purple") #912b88
govuk-colour("pink") #d53880
govuk-colour("light-pink") #f499be
govuk-colour("orange") #f47738
govuk-colour("brown") #b58840
govuk-colour("light-green") #85994b
govuk-colour("turquoise") #28a197

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.