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.

Tint and shade

You can modify the colour palette by adding white or black to the colour.

See examples of how to modify the tint and shades.

Future breaking change

The scss variable names are going to change in the next incremental 1.x.x version of DfE Frontend to match the naming convention of dfe-.

Legacy names will be removed in Version 2.0.0 of DfE Frontend and will not be usable resulting in a breaking change.