Styles

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 level AA of the Web Content Accessibility Guidelines (WCAG 2.0).

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 #005ea5. 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 to represent some data in a graph you should use govuk-colour("red") rather than $govuk-error-colour.

Text

$govuk-text-colour #0b0c0c
$govuk-secondary-text-colour #6f777b

Links

$govuk-link-colour #005ea5
$govuk-link-hover-colour #2b8cc4
$govuk-link-visited-colour #4c2c92
$govuk-link-active-colour #2b8cc4

Border

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

Focus state

$govuk-focus-colour #ffbf47 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 #b10e1e Use for error messages

Brand colour

$govuk-brand-colour #005ea5

Colour palette

Use these colours for graphs and supporting material.

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%.

You can find departmental colours in the GOV.UK Frontend _colours-organisations file.

govuk-colour("purple") #2e358b
govuk-colour("light-purple") #6f72af
govuk-colour("bright-purple") #912b88
govuk-colour("pink") #d53880
govuk-colour("light-pink") #f499be
govuk-colour("red") #b10e1e
govuk-colour("bright-red") #df3034
govuk-colour("orange") #f47738
govuk-colour("brown") #b58840
govuk-colour("yellow") #ffbf47
govuk-colour("light-green") #85994b
govuk-colour("green") #006435
govuk-colour("turquoise") #28a197
govuk-colour("light-blue") #2b8cc4
govuk-colour("blue") #005ea5
govuk-colour("black") #0b0c0c
govuk-colour("grey-1") #6f777b
govuk-colour("grey-2") #bfc1c3
govuk-colour("grey-3") #dee0e2
govuk-colour("grey-4") #f8f8f8
govuk-colour("white") #ffffff

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Colour’ on GitHub