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)

Sass variables

Use the Sass variables listed below, so you’ll automatically get any updates to the GOV.UK colour palette when you update GOV.UK Frontend.

Main colours

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

Border

$govuk-border-colour #bfc1c3

Focus

$govuk-focus-colour #ffbf47

Status

govuk-colour("blue") #005ea5 Use for phase banners
$govuk-error-colour #b10e1e Use for error messages

Greyscale

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

Extended colours

Use these colours for graphs and supporting material.

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

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

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("light-purple") #6f72af
govuk-colour("purple") #2e358b
govuk-colour("bright-purple") #912b88
govuk-colour("pink") #d53880
govuk-colour("light-pink") #f499be

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