Colour palette

Always use the GOV.UK colour palette first.

Where you want to use an accent colour or departmental blue in your service, use this palette.

You must not change the colour of GOV.UK Design System components to these colours, for example, buttons.

Do not use the hexadecimal (hex) codes directly, use the mixin name. For example, if you wanted to use the DfE department colour blue use: $color_dfe-blue instead of #003a69.

A
Fail
A
Pass

Variable name

$color_dfe-blue;

Hex

#003A69

RGB

0, 58, 105

Notes

This is the official government identity colour for the Department for Education.

A
Fail
A
Pass

Variable name

$color_dfe-secondary-blue;

Hex

#347CA9

RGB

52, 124, 169

Notes

This colour should be used as a secondary accent to the primary department colour.

Colour modifiers and tools

You can use tint and shades of the colour palette to introduce different ways of using the colours.

Tint

Make a colour lighter by mixing it with white.

$colour
The colour to tint
$percentage
Percentage of white to mix with $colour

Tint usage

Adds 50% white to the primary dfe blue color.

$govuk-tint($color_dfe-blue, 50);

dfe-blue tints

0
10
20
30
40
50
60
70
80
90

dfe-seconday-blue tints

0
10
20
30
40
50
60
70
80
90

Shade

Make a colour darker by mixing it with black.

$colour
The colour to shade
$percentage
Percentage of black to mix with $colour

Shade usage

Adds 50% black to the primary dfe blue color.

$govuk-shade($color_dfe-blue, 50);

dfe-blue shade

0
10
20
30
40
50
60
70
80
90

dfe-seconday-blue shade

0
10
20
30
40
50
60
70
80
90

Future changes

  • Variable names will change to start dfe-.
  • Legacy color names will be removed in Version 3