Colours

SMG CORE PALETTE

The foundation of our group identity is the careful use of black and white to create a strong, classic appearance.

SMG COLOUR WHEEL

Supported by a vibrant secondary set of colours:

Note that if used as a background, colours have different text colour, to ensure sufficient contrast to meet a11y standards. you can use the choose-contrast-color scss function to return either white or black for any colour.

SMG-red

Scss
$c-red
Hex
#e60060

SMG-orange

Scss
$c-orange
Hex
#ec6408

SMG-yellow

Scss
$c-yellow
Hex
#ffee00

SMG-green

Scss
$c-green
Hex
#95c11f

SMG-teal

Scss
$c-teal
Hex
#4bbecf

SMG-blue

Scss
$c-blue
Hex
#004899

SMG-purple

Scss
$c-purple
Hex
#af1280

SMG-red

Contrasting text colour
white
Contrast
4.632178056150617
accessibility
aa: PASS
aaLarge: PASS
aaa: FAIL
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation
 

SMG-orange

Contrasting text colour
black
Contrast
6.392948322587083
accessibility
aa: PASS
aaLarge: PASS
aaa: FAIL
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation
 

SMG-yellow

Contrasting text colour
black
Contrast
17.48181426660904
accessibility
aa: PASS
aaLarge: PASS
aaa: PASS
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation
 

SMG-green

Contrasting text colour
black
Contrast
9.925683704742433
accessibility
aa: PASS
aaLarge: PASS
aaa: PASS
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation
 

SMG-teal

Contrasting text colour
black
Contrast
9.565552218026497
accessibility
aa: PASS
aaLarge: PASS
aaa: PASS
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation
 

SMG-blue

Contrasting text colour
white
Contrast
8.797921271313326
accessibility
aa: PASS
aaLarge: PASS
aaa: PASS
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation
 

SMG-purple

Contrasting text colour
white
Contrast
6.519679840303777
accessibility
aa: PASS
aaLarge: PASS
aaa: FAIL
aaaLarge: PASS
Lighter For e.g. hover variation
 
Darker For e.g. hover variation