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.
Functional 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
|
|
GOV.UK web palette
If you need to add other colours, and your product or service is within the GOV.UK proposition, use the GOV.UK web palette and its brand colours.
Use the _colours-palette.scss file to find the values for colours along with their tints and shades.
The GOV.UK brand guidelines shows the full list of colours and swatches.
Add colours with the govuk-colour function
In [January 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:
- HM Government branding portal
- Cabinet Office branding team
- Design102, the government’s in-house design studio
- Communications teams from individual organisations
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 on GitHub – 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.