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.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 thangovuk-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("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).
Help improve this style
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘Colour’ discussion on GitHub and share your research
- propose a change – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.