• Visual Language
  • Colors

Accent

Alt blue
#0054aa
$blue-alt
ONS Green Light
#f0f1d5
$ons-green--light
Light blue
#007dc3
$blue-light
Azure
#00b5cb
$azure
Dark green
#00543d
$green-dark
box--orange
#f37121
$box--orange
Red
#e2383f
$red
Dark red
#a8233e
$red-dark
Pink
#ec008c
$pink

Usage notes

Accent colours should used in small quantities to add visual depth to a page.

This colour scheme has been refined for web usage and is in keeping with ONS's brand guidelines. They have been chosen to complement the primary colours

Please do not introduce any new colours to the exiting palette. It is ok to use lighter or darker tints of each colour for shading, active states etc., but avoid additional colours that are not tints.

If you wish to emphasise a section of a page, try using weight, scale and proximity, or de-emphasise other areas instead.

Additional colours, even colours in the palette, can add clutter to a page.