Styles - Colour

Our colours, and how to apply them.

Using colour

Our brand colours help people recognise and trust that our services come from the HSE.

We also use colour to help users prioritise and differentiate information - for example we use:

HSE-green-300 for focus states
yellow for warning callouts
red to communicate urgency or error

Colour contrast

Our text and background colours are designed to meet accessibility needs. We meet at least level AA for contrast and aim for level AAA as far as possible. Read more about accessibility and colour on this page.

Main colours

If you are using HSE.IE frontend or the HSE.IE prototype kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. For example, use $hse-text-color rather than #212b32. This means that your service will always use the most recent colour palette whenever you update.

Only use the variables in the context they’re designed for. In all other cases, you should reference the colour palette directly. For example, if you wanted to use red to represent some data in a graph you should use $color_hse-red rather than $hse-error-color.

Text

Sass text name	Sass text code	Hex value
`$hse-text-color`	`$color_hse-grey-900`	`#212b32`
`$hse-secondary-text-color`	`$color_hse-grey-700`	`#455C68`

Links

Sass text name	Sass text code	Hex value
`$hse-link-color`	`$color_hse-blue`	`#0B55B7`
`$hse-link-hover-color`	`$color_hse-purple-500`	`#782CC3`
`$hse-link-visited-color`	`$color_hse-purple-700`	`#5F3DC4`
`$hse-link-active-color`	`shade($hse-link-color, 50%)`	`#0B55B780`

Focus state

Sass text name	Sass text code	Hex value
`$hse-focus-color`	`$color_hse-green-300`	`#73E6C2`
`$hse-focus-text-color`	`$color_hse-grey-900`	`#212B32`

Border

Sass text name	Sass text code	Hex value
`$hse-border-color`	`$color_hse-grey-300`	`#AEB7BD`
`$hse-secondary-border-color`	`$color_transparent_hse-white-20`	`#ffffff33`

Forms

Sass text name	Sass text code	Hex value
`$hse-error-color`	`$color_hse-red-500`	`#B30638`
`$hse-form-border-color`	`$color_hse-grey-700`	`#455C68`
`$hse-form-element-background-color`	`$color_hse-white-0`	`#FFF`

Box shadow

Sass text name	Sass text code	Hex value
`$hse-box-shadow`	`rgba(33, 43, 50, .16)`	`#212b3229`
`$hse-box-shadow-color`	`$color_hse-grey-700-rgb`	`rgb(66, 84, 98)`

Panel

Sass text name	Sass text code	Hex value
`$hse-panel-shadow`	`rgba(0, 0, 0, .1)`	`#0000001a`

Buttons

Primary

Sass text name	Sass text code	Hex value
`$hse-button-color`	`$color_hse-purple-700`	`#5F3DC4`
`$hse-button-hover-color`	`$color_hse-purple-500`	`#782CC3`
`$hse-button-hover-shadow`	`0 4px 15px rgba(0, 0, 0, .2)`	`#00000033`
`$hse-button-disabled-color`	`$color_hse-grey-100`	`#D8DDE0`
`$hse-button-active-color`	`$color_hse-purple-500`	`#782CC3`

Secondary

Sass text name	Sass text code	Hex value
`$hse-secondary-button-border-color`	`$color_hse-purple-700`	`#5F3DC4`
`$hse-secondary-button-hover-color`	`$color_hse-purple-500`	`#782CC3`
`$hse-secondary-hover-shadow`	`0 4px 15px rgba(0, 0, 0, .1)`	`#0000001a`
`$hse-secondary-button-disabled-border-color`	`$color_hse-grey-500`	`#768692`
`$hse-secondary-button-active-color`	`rgba($color_hse-purple-500, .2)`	`#768692`

Text button

Sass text name	Sass text code	Hex value
`$hse-text-button-border-color`	`$color_hse-purple-700`	`#5F3DC4`
`$hse-text-button-hover-color`	`$color_hse-purple-500`	`#782CC3`
`$hse-text-hover-shadow`	`0 4px 15px rgba(0, 0, 0, .1)`	`#0000001a`
`$hse-text-button-active-color`	`rgba($color_hse-purple-500, .2)`	`#5F3DC433`

Reverse

Sass text name	Sass text code	Hex value
`$hse-reverse-button-color`	`$color_hse-grey-50`	`#F3F3F3`
`$hse-reverse-button-hover-color`	`$color_hse-white-0`	`#FFF`
`$hse-reverse-button-disabled-color`	`$color_hse-grey-100`	`#D8DDE0`
`$hse-reverse-hover-border-color`	`$color_hse-grey-50`	`#F3F3F3`
`$hse-reverse-button-active-color`	`$color_hse-grey-50`	`#F3F3F3`

Primary button text colour

Sass text name	Sass text code	Hex value
`$hse-button-text-color`	`$color_hse-white-0`	`#FFF`
`$hse-button-disabled-text-color`	`$color_hse-grey-500`	`#768692`

Secondary button text colour

Sass text name	Sass text code	Hex value
`$hse-secondary-button-text-color`	`$hse-secondary-button-border-color`	`#5F3DC4`
`$hse-secondary-button-hover-text-color`	`$hse-secondary-button-hover-color`	`#782CC3`
`$hse-secondary-button-disabled-text-color`	`$color_hse-grey-500`	`#768692`

Text button text colour

Sass text name	Sass text code	Hex value
`$hse-text-button-text-color`	`$hse-text-button-border-color`	`#5F3DC4`
`$hse-text-button-hover-text-color`	`$hse-text-button-hover-color`	`#782CC3`
`$hse-text-button-disabled-text-color`	`$color_hse-grey-500`	`#768692`

Reverse button text colour

Sass text name	Sass text code	Hex value
`$hse-reverse-button-text-color`	`$color_hse-grey-900`	`#212B32`
`$hse-reverse-button-disabled-text-color`	`$color_hse-grey-500`	`#768692`

Page background colour

We use $color_hse-grey-50 as a background tint. This is because:

it reduces overall page glare
the British Dyslexia Association recommends dark text on a light, but not white, background
components with important information, like callouts, stand out

$color_hse-white-0 is used to make important information stand out and for alternating backgrounds, for example on the HSE website home page.

Colour palette

Avoid using the palette colours if there is a Sass variable that is designed for your context. For example, if you are styling the error state of a component you should use the $hse-error-color Sass variable rather than $color_hse-red-500.

HSE Green

Sass text name	Hex value
`$color_hse-green-900`	`#00473E`
`$color_hse-green-700`	`#02594C`
`$color_hse-green-500`	`#02A78B`
`$color_hse-green-300`	`#73E6C2`
`$color_hse-green-100`	`#80FFD8`
`$color_hse-green-50`	`#ECFBF6`

Greyscale

Sass text name	Hex value
`$color_hse-grey-900`	`#212B32`
`$color_hse-grey-700`	`#455C68`
`$color_hse-grey-500`	`#768692`
`$color_hse-grey-300`	`#AEB7BD`
`$color_hse-grey-100`	`#D8DDE0`
`$color_hse-grey-50`	`#F3F3F3`
`$color_hse-white-0`	`#FFF`

Purple

Sass text name	Hex value
`$color_hse-purple-700`	`#5F3DC4`
`$color_hse-purple-500`	`#782CC3`
`$color_hse-purple-300`	`#AA37E0`

Blue

Sass text name	Hex value
`$color_hse-blue-900`	`#042249`
`$color_hse-blue-800`	`#07336E`
`$color_hse-blue-600`	`#094492`
`$color_hse-blue-500`	`#0B55B7`
`$color_hse-blue-300`	`#6D99D4`
`$color_hse-blue-100`	`#CEDDF1`
`$color_hse-blue-50`	`#DBE7FF`

Red

Sass text name	Hex value
`$color_hse-red-500`	`#B30638`

Yellow

Sass text name	Hex value
`$color_hse-yellow-500`	`#FFDE0E`

Functions for tint and shade

Sass name	Sass function	Description
$color_tint_hse-black-10	`tint($color_hse-grey-900, 10%)`	used for link :active states
$color_shade_hse-blue-20	`shade($color_hse-blue, 20%)`	used for .is-active state on main navigation
$color_shade_hse-blue-35s	`shade($color_hse-blue, 35%)`	used for :hover states on main navigation
$color_shade_hse-blue-50	`shade($color_hse-blue, 50%)`	used for :active states on main navigation
$color_shade_hse-green-20	`shade($color_hse-green-700, 20%)`	Undefined
$color_shade_hse-green-35	`shade($color_hse-green-700, 35%)`	used for primary button and action link icon :hover states
$color_shade_hse-green-50	`shade($color_hse-green-700, 50%)`	used for primary button and action link icon :active states
$color_shade_hse-red-20	`shade($color_hse-red-500, 20%)`	Undefined
$color_shade_hse-red-35	`shade($color_hse-red-500, 35%)`	Undefined
$color_shade_hse-red-50	`shade($color_hse-red-500, 50%)`	Undefined
$color_transparent_hse-white-20	`rgba($color_hse-white-0, .2)`	Undefined
$color_transparent_hse-blue-50	`rgba($color_shade_hse-blue-50, .1)`	Undefined
$color_transparent_hse-green-50	`rgba($color_shade_hse-green-50, .1)`	Undefined
$color_shade_hse-grey-1-20	`shade($color_hse-grey-700, 20%)`	Undefined

Extended colours

The HSE Visual Identity Guidelines have an extended colour palette. We haven't tested these colours yet for digital use.

Accessibility

Make sure that what the colour is "saying" is available in other ways. Read "Do not rely on colour or position alone" in our accessibility guidance.

Colour contrast

Text and components, like buttons, must have contrast ratios that meet the contrast minimum for AA of the Web Content Accessibility Guidelines (WCAG 2.1). We aim for AAA as far as possible.

This helps people with colour vision deficiency (colour blindness) who find it difficult to distinguish between certain colours, often shades of red, yellow and green.

More about contrast in components and graphic elements

Use a tool to calculate the ratio between the element and the adjacent colour. For example, the white arrow (foreground) and the green circle (background) in an action link.

If you rely on users understanding a graphic (like an icon) without text, it must meet the minimum contrast ratio. If it also has text, it does not have to meet the requirement but we recommend you try to meet it anyway.

Components that are visible but not currently active (like a submit button that is not active until the user has filled in the form) do not have to meet the requirement. But if you can meet the minimum contrast without it being confusing, it will help people with low vision.

AA

The contrast ratio should be at least:

4.5:1 for small text (smaller than 24px, or 19px if bold)
3:1 for large text (larger than 24px, or 19px if bold) and components (like a text input field or button) and graphic elements (like an icon)

AAA

The contrast ratio should be at least:

7:1 for small text (smaller than 24px, or 19px if bold)
4.5:1 for large text (larger than 24px, or 19px if bold) and components (like a text input field or button) and graphic elements (like an icon)

Testing tools

Use tools like these to check contrast:

Also test colour contrast with people of all abilities.

Updated: September 2023