Web colour palette
1. Primary colours
- All are compliant AAA or AA
- Compliant as a background colour with white text on top
- Compliant as text on a white background
Burgundy
HEX: #912338
Compliant AAA
Magenta
HEX: #db0272
Compliant AA
Orange
HEX: #da3a16
Compliant AA
Mauve
HEX: #573996
Compliant AAA
Dark blue
HEX: #004085
Compliant AAA
Blue
HEX: #0072a8
Compliant AA
Turquoise
HEX: #057d78
Compliant AA
Green
HEX: #508212
Compliant AA
2. Secondary colours
- Compliant AAA when used with black text
- Available only in the button and card component (use of black text on top of these colours is hard coded into the component)
Yellow
HEX: #e5a712
Compliant AAA (black text)
Gold
HEX: #cbb576
Compliant AAA (black text)
Cyan
HEX: #00adef
Compliant AAA (black text)
Lime
HEX: #8cc63e
Compliant AAA (black text)
3. Background tints
- Can be used to create blocks of background colour on a web page to seperate and draw attention to content
Burgundy
HEX: #E9D3D7
Magenta
HEX: #FACDE3
Orange
HEX: #f9cdc3
Mauve
HEX: #dcd6e8
Dark blue
HEX: #B2C5DA
Blue
HEX: #d3e1e9
Turquoise
HEX: #CCE3E4
Green
HEX: #dfeccf
Gold
HEX: #e9e3d3
4. Neutrals
- Addition of a new dark grey
Light grey
HEX: #f0f0f0
Compliant with black text
Medium grey
HEX: #c8c8c8
Compliant with black text
Dark grey
HEX: #6e6e6e
Compliant AA
Very dark grey
HEX: #2c2c2c
Compliant AAA
Black
HEX: #000
Compliant AAA