Colours

Overview

Colours are grouped by brand colours, functional palette and background colours.

Brand colour palette

Legend

Color Title
Hex Code
Sass property name

Usage

/*  Sass usage: use the sass property name inside the color function */
.element {
    color: color('purple');
    background-color: color('grey-accent-light-4');
}

Light Blue
61C1EE
blue-accent
Blue
1790CC
blue
Light Grey
BBBDBF
grey-accent
Grey
7C7E80
grey
Light Teal
69C8CF
teal-accent
Teal
15A4AA
teal
Light Green
BED630
green-accent
Green
44A648
green
Light Orange
FCB813
orange-accent
Orange
DE7426
orange
Light Purple
B271AE
purple-accent
Purple
8E499B
purple
Light Pink
D963A4
pink-accent
Pink
D30E8B
pink
Gold
A28836
gold
White
FFFFFF
white
Onyx
000000
onyx

Functional colour palette

Link Blue
0A6FB3
link-blue
Usage: For use on buttons and links
Copy Grey
5E5E5E
copy
Usage: For use on white and light grey backgrounds
Copy Dark Grey
231F20
copy-dark
Usage: For use on coloured backgrounds
Error Light
F9E8F1
error-light
Usage: For use on error backgrounds
Light Green
F2F7D6
alert-success
Usage: Alert background
Light Yellow
FFF1D9
alert-warning
Usage: Alert background
Light Pink
F9E7F1
alert-fail
Usage: Alert background
Light Blue
DAEDF7
alert-info
Usage: Alert background

Background colour palette

Usage

Use background colours in panels to distinguish between content areas or to add emphasis. Background colours use a brand colour as a base, with lightness / opacity being adjusted in 20% increments.

Blue #1790CC
color('blue')
Blue Light 1 #45A6D6
color('blue-light-1')
Blue Light 2 #74BCE0
color('blue-light-2')
Blue Light 3 #A2D3EB
color('blue-light-3')
Blue Light 4 #D1E9F5
color('blue-light-4')
Blue Accent #61C1EE
color('blue-accent')
Blue Accent Light 1 #81CDF1
color('blue-accent-light-1')
Blue Accent Light 2 #A0DAF5
color('blue-accent-light-2')
Blue Accent Light 3 #C0E6F8
color('blue-accent-light-3')
Blue Accent Light 4 #DFF3FC
color('blue-accent-light-4')
Teal #15A4AA
color('teal')
Teal Light 1 #44B6BB
color('teal-light-1')
Teal Light 2 #73C8CC
color('teal-light-2')
Teal Light 3 #A1DBDD
color('teal-light-3')
Teal Light 4 #D0EDEE
color('teal-light-4')
Teal Accent #69C8CF
color('teal-accent')
Teal Accent Light 1 #87D3D9
color('teal-accent-light-1')
Teal Accent Light 2 #A5DEE2
color('teal-accent-light-2')
Teal Accent Light 3 #C3E9EC
color('teal-accent-light-3')
Teal Accent Light 4 #E1F4F5
color('teal-accent-light-4')
Green #44A648
color('green')
Green Light 1 #69B86D
color('green-light-1')
Green Light 2 #8FCA91
color('green-light-2')
Green Light 3 #B4DBB6
color('green-light-3')
Green Light 4 #DAEDDA
color('green-light-4')
Green Accent #BED630
color('green-accent')
Green Accent Light 1 #CBDE59
color('green-accent-light-1')
Green Accent Light 2 #D8E683
color('green-accent-light-2')
Green Accent Light 3 #E5EFAC
color('green-accent-light-3')
Green Accent Light 4 #F2F7D6
color('green-accent-light-4')
Orange #DE7426
color('orange')
Orange Light 1 #E59051
color('orange-light-1')
Orange Light 2 #EBAC7D
color('orange-light-2')
Orange Light 3 #F2C7A8
color('orange-light-3')
Orange Light 4 #F8E3D4
color('orange-light-4')
Orange Accent #FCB813
color('orange-accent')
Orange Accent Light 1 #FDC642
color('orange-accent-light-1')
Orange Accent Light 2 #FDD471
color('orange-accent-light-2')
Orange Accent Light 3 #FEE3A1
color('orange-accent-light-3')
Orange Accent Light 4 #FEF1D0
color('orange-accent-light-4')
Purple #8E499B
color('purple')
Purple Light 1 #A56DAF
color('purple-light-1')
Purple Light 2 #BB92C3
color('purple-light-2')
Purple Light 3 #D2B6D7
color('purple-light-3')
Purple Light 4 #E8DBEB
color('purple-light-4')
Purple Accent #B271AE
color('purple-accent')
Purple Accent Light 1 #C18DBE
color('purple-accent-light-1')
Purple Accent Light 2 #D1AACE
color('purple-accent-light-2')
Purple Accent Light 3 #E0C6DF
color('purple-accent-light-3')
Purple Accent Light 4 #F0E3EF
color('purple-accent-light-4')
Pink #D30E8B
color('pink')
Pink Light 1 #DC3EA2
color('pink-light-1')
Pink Light 2 #E56EB9
color('pink-light-2')
Pink Light 3 #ED9FD1
color('pink-light-3')
Pink Light 4 #F6CFE8
color('pink-light-4')
Pink Accent #D963A4
color('pink-accent')
Pink Accent Light 1 #E182B6
color('pink-accent-light-1')
Pink Accent Light 2 #E8A1C8
color('pink-accent-light-2')
Pink Accent Light 3 #F0C1DB
color('pink-accent-light-3')
Pink Accent Light 4 #F7E0ED
color('pink-accent-light-4')
Grey #7C7E80
color('grey')
Grey Light 1 #969899
color('grey-light-1')
Grey Light 2 #ACADAE
color('grey-light-2')
Grey Light 3 #CBCBCC
color('grey-light-3')
Grey Light 4 #E5E5E6
color('grey-light-4')
Grey Accent #BBBDBF
color('grey-accent')
Grey Accent Light 1 #C9CACC
color('grey-accent-light-1')
Grey Accent Light 2 #D6D7D9
color('grey-accent-light-2')
Grey Accent Light 3 #E4E5E5
color('grey-accent-light-3')
Grey Accent Light 4 #F1F2F2
color('grey-accent-light-4')
Gold #A28836
color('gold')
Gold Light 1 #B5A05E
color('gold-light-1')
Gold Light 2 #C7B886
color('gold-light-2')
Gold Light 3 #DACFAF
color('gold-light-3')
Gold Light 4 #ECE7D7
color('gold-light-4')