GOV.UK elements Colour

Always use the GOV.UK colour palette.

Contents:

Colour contrast

The colour contrast ratio for text and interactive elements should be at least 4.5:1 as recommended by the W3C. Test your service to meet this standard.

Sass variables

Use Sass variables in case colour values need to be updated – find these in the GOV.UK frontend toolkit colours.scss file.

Text

  • #0B0C0C
  • $text-colour
  • #6F777B
  • $secondary-text-colour
  • #FFFFFF
  • $page-colour

Links

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

Backgrounds

  • #BFC1C3
  • $border-colour
  • #DEE0E2
  • $panel-colour
  • #F8F8F8
  • $highlight-colour

Buttons

  • #00823B
  • $button-colour
  • #006435
  • $green (hover colour)

Focus

  • #FFBF47
  • $focus-colour

Status colours

  • #005ea5
  • $govuk-blue

Use for Alpha and Beta banners

  • #B10E1E
  • $error-colour

Use for error messages

Greyscale palette

  • #0B0C0C
  • $black
  • #6F777B
  • $grey-1
  • #BFC1C3
  • $grey-2
  • #DEE0E2
  • $grey-3
  • #F8F8F8
  • $grey-4

Extended palette

Purple

  • #2e358b
  • $purple

Mauve

  • #6f72af
  • $mauve

Fuschia

  • #912b88
  • $fuschia

Pink

  • #d53880
  • $pink

Baby pink

  • #f499be
  • $baby-pink

Red

  • #b10e1e
  • $red

Mellow red

  • #df3034
  • $mellow-red

Orange

  • #f47738
  • $orange

Brown

  • #b58840
  • $brown

Yellow

  • #ffbf47
  • $yellow

Green

  • #006435
  • $green

Grass green

  • #85994b
  • $grass-green

Turquoise

  • #28a197
  • $turquoise

Light blue

  • #2b8cc4
  • $light-blue

GOV.UK blue

  • #005ea5
  • $govuk-blue

Discuss colour on the design patterns Hackpad

Examples

Confirmation page

When using the white text on a turquoise background — ensure the minimum text size is 24px normal weight, or 19px bold. This is to meet colour contrast ratio requirements.

Example service name

Application complete

Your reference number is
HDJ2123F

We have sent you a confirmation email.

What happens next?

We’ve sent your application to Hackney Electoral Register Office.

They will contact you either to confirm your registration, or to ask for more information.