Colour schemes

Content

Primary palette
Grey palette
Secondary palette

Primary colour palette

These are the primary colours to use for HSE services.

Red should be used for the header only.
Blue should be used for link text, buttons and indicate an action or link
Black should be used for headings and body copy
Purple should be used as the voice of HSE for alerts/error messages or to indicate that something new is displaying on the page
Grey is availabe if required for additional elements

Example

HSE red / #9d1a31
HSE blue / #006EB4
White / #fff
HSE grey / #333
HSE purple / #2e358b

Greyscale palette

Grey palette is available if additional acents required.

Example

#0B0C0C / $Black
#6F777B / $grey-1
#BFC1C3 / $grey-2
#DEE0E2 / $grey-3
#F8F8F8 / $grey-4

Secondary palette

Secondary palette This should only be used if a design requires further colours to differentiate between sections.
More rules to be defined on Extended Palette
Endless rules to be defined on Extended Palette

Example>

$pink / #d53880
$mellow-red / #df3034
$yellow / #ffbf47
$turquoise / #28a197
$mauve / #6f72af
$baby-pink / #f499be
$orange / #f47738
$green / #006435
$light-blue / #2b8cc4
$fuschia / #912b88
$red / #b10e1e
$brown / #b58840
$grass-green / #85994b
$govuk-blue / #005ea5