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

Transaction end page

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.