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
Need help with the Concordia Web Style Guide?
Whether you have questions about implementation, accessibility, or best practices, our team is here to support you in building consistent, user-friendly web experiences.
Contact us at websupport@concordia.ca to get guidance or request support.