Our palette of colours has been carefully considered to be distinctive to ICAEW. They are muted in tone to ensure our red dividers always stand out clearly when overlayed. Refer to our corporate style guide for further documentation of their correct usage.
Accessibility
Think about how your colour choices can affect legibility and accessibility — read WCAG 2.0 specifications on using colour. To be legible, text and background colours must have a minimum contrast between them.
Brand Red
Our palette of background colours has been carefully considered to be distinctive to ICAEW. They are muted in tone to ensure our red dividers always stand out clearly when used over them. These colours are used as backgrounds for primary imagery, illustrative typography and graphic illustration. Charts and graphs use these colours. Large illustrative feature typography may appear in these colours if appropriate. They can be used at 80%, 60%,40% and 20% tint.
Primary
$colour__red
rgb (227, 5, 19)
#E30513
Pastel Colours
Our palette of background colours has been carefully considered to be distinctive to ICAEW. They are muted in tone to ensure our red dividers always stand out clearly when used over them. These colours are used as backgrounds for primary imagery, illustrative typography and graphic illustration. Charts and graphs use these colours. Large illustrative feature typography may appear in these colours if appropriate. They can be used at 80%, 60%,40% and 20% tint.
Green
$colour__green
rgb (169, 196, 127)
#A9C47F
$colour__green--40
rgb (221, 231, 204)
#DDE7CC
Blue
$colour__blue
rgb (139, 211, 230)
#8BD3E6
$colour__blue--40
rgb (209, 237, 245)
#D1EDF5
Teal
$colour__teal
rgb (107, 202, 186)
#6bCABA
$colour__teal--40
rgb (196, 234, 227)
#C4EAE3
Purple
$colour__purple
rgb (178, 136, 185)
#B288B9
$colour__purple--40
rgb (224, 207, 227)
#E0CFE3
Orange
$colour__orange
rgb (230, 166, 93)
#E6A65D
$colour__orange--40
rgb (245, 219, 190)
#F5DBBE
Neutral
Black and white are used for type, text, graphic illustration and functional elements such as keylines. A 70% of black can be used.
Cool Grey
$colour__cool-grey
rgb (204, 204, 204)
#CCCCCC
$colour__cool-grey--80
rgb (214, 214, 214)
#D6D6D6
$colour__cool-grey--60
rgb (224, 224, 224)
#E0E0E0
$colour__cool-grey--40
rgb (235, 235, 235)
#EBEBEB
$colour__cool-grey--20
rgb (245, 245, 245)
#F5F5F5
Warm grey
$colour__warm-grey--40
rgb (236, 233, 231)
#ECE9E7
$colour__warm-grey--20
rgb (245, 244, 243)
#F5F4F3
White
$colour__white
rgb (255, 255, 255)
#FFFFFF
Text colours
Black and white are used for type, text, graphic illustration and functional elements such as keylines. A 70% of black can be used.
Black
$colour__black
rgb (0, 0, 0)
#000000
$colour__black--70
rgb (77, 77, 77)
#4D4D4D
Link colours
A darker, multiplied shades of our brand blue and purple have been adapted to conform with web standards and accessibility for use strictly on hyperlinks only.
Utility
$colour__utility-blue
rgb (33, 90, 142)
#215A8E
$colour__utility-purple
rgb (176, 158, 168)
#B09EA8
Feedback colours
Additional feedback colours are used to highlight to the user a function or interaction away from the general brand palette. The feedback colours can be used at either 100% or 20% opacity.
Yay
$colour__feedback-yay
rgb (130, 191, 88)
#82BF58
$colour__feedback-yay--20
rgb (230, 242, 220)
#E6F2DE
Boo
$colour__feedback-boo
rgb (223, 100, 81)
#DF6451
$colour__feedback-boo--20
rgb (249, 224, 220)
#F9E0DC
Wait
$colour__feedback-wait
rgb (241, 206, 108)
#F1CE6C
$colour__feedback-wait--20
rgb (252, 245, 226)
#FCF5E2
Okay
$colour__feedback-okay
rgb (98, 158, 218)
#629EDA
$colour__feedback-okay--20
rgb (224, 236, 248)
#E0ECF8