Colour

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.

Colours

#005ea5

$govuk-blue

#005ea5

$mainstream-brand

#2e358b

$purple

#9799c4

$purple-50

#d5d6e7

$purple-25

#6f72af

$mauve

#b7b9d7

$mauve-50

#e2e2ef

$mauve-25

#912b88

$fuschia

#c994c3

$fuschia-50

#e9d4e6

$fuschia-25

#d53880

$pink

#eb9bbe

$pink-50

#f6d7e5

$pink-25

#f499be

$baby-pink

#faccdf

$baby-pink-50

#fdebf2

$baby-pink-25

#b10e1e

$red

#d9888c

$red-50

#efcfd1

$red-25

#df3034

$mellow-red

#ef9998

$mellow-red-50

#f9d6d6

$mellow-red-25

#f47738

$orange

#fabb96

$orange-50

#fde4d4

$orange-25

#b58840

$brown

#dac39c

$brown-50

#f0e7d7

$brown-25

#ffbf47

$yellow

#ffdf94

$yellow-50

#fff2d3

$yellow-25

#85994b

$grass-green

#c2cca3

$grass-green-50

#e7ebda

$grass-green-25

#006435

$green

#7fb299

$green-50

#cce0d6

$green-25

#28a197

$turquoise

#95d0cb

$turquoise-50

#d5ecea

$turquoise-25

#2b8cc4

$light-blue

#96c6e2

$light-blue-50

#d5e8f3

$light-blue-25

#0b0c0c

$black

#6f777b

$grey-1

#bfc1c3

$grey-2

#dee0e2

$grey-3

#f8f8f8

$grey-4

#fff

$white

#005ea5

$link-colour

#2b8cc4

$link-active-colour

#2b8cc4

$link-hover-colour

#4c2c92

$link-visited-colour

#00823b

$button-colour

#ffbf47

$focus-colour

#0b0c0c

$text-colour

#6f777b

$secondary-text-colour

#bfc1c3

$border-colour

#dee0e2

$panel-colour

#f8f8f8

$canvas-colour

#f8f8f8

$highlight-colour

#fff

$page-colour

#912b88

$discovery-colour

#d53880

$alpha-colour

#f47738

$beta-colour

#85994b

$live-colour

#000

$banner-text-colour

#b10e1e

$error-colour

#fef7f7

$error-background

#2e3133

$proposition-border

#1d8feb

$proposition-active-nav

#dee0e2

$footer-background

#a1acb2

$footer-border-top

#454a4c

$footer-link

#171819

$footer-link-hover

#454a4c

$footer-text