Colour Palette
Strengthen the McMaster brand by consistently using the McMaster colour palette across all digital communications.
The McMaster Heritge rich hues suggest tradition and solidity. These colours are all reflected in the McMaster logo, an essential element of our brand identity.
The Brighter World brand colours blend well with McMaster Maroon and Gold and provide a broadened range of colour options that renew McMaster’s image in a youthful way. This palette is intentionally vibrant and these hues complement each other and the Heritage Colour palette, reflecting the “Brighter World” brand story (see the McMaster Brand Standards Manual) and spirit of collaboration at the university.
McMaster Heritage Colours
McMaster Heritage Maroon is a key brand colour. Continue to use this Heritage colour for all digital applications where appropriate.
#7A003C
#FDBF57
#5E6A71
<div class="row">
<div class="col-lg-4"><div class="maroon rounded p-2">HERITAGE MAROON<br>#7A003C</div></div>
<div class="col-lg-4"><div class="gold rounded p-2">HERITAGE GOLD<br>#FDBF57</div></div>
<div class="col-lg-4"><div class="grey rounded p-2">HERITAGE GREY<br>#5E6A71</div></div>
</div>
Tints and Shades
A tint is a screened (lighter) version of a colour. Tints of the McMaster Heritage colours are allowed only in tables and charts when information should be separated to increase the legibility or provide hierarchy of information. Keep in mind that for web and other digital applications, all colour combinations have to pass AA standards from W3C.
#ac1455
#7A003C
#56002a
#efefef
#dbdbdd
#aeb4b8
#5E6A71
#222222
<div class="row">
<div class="col-lg-4 ml-auto">
<div class="light-maroon rounded p-2 my-2">LIGHT MAROON<br>#ac1455</div>
<div class="maroon rounded p-2 my-2">HERITAGE MAROON<br>#7A003C</div>
<div class="dark-maroon rounded p-2 my-2">DARK MAROON<br>#56002a</div>
</div>
<div class="col-lg-4 mr-auto">
<div class="light-grey rounded p-2 my-2">LIGHT GREY<br>#efefef</div>
<div class="cool-grey rounded p-2 my-2">COOL GREY<br>#dbdbdd</div>
<div class="medium-grey rounded p-2 my-2">MEDIUM GREY<br>#aeb4b8</div>
<div class="grey rounded p-2 my-2">HERITAGE GREY<br>#5E6A71</div>
<div class="dark-grey rounded p-2 my-2">DARK GREY<br>#222222</div>
</div>
</div>
Highlights
Used for highlights and backgrounds in the duotone images.
#FFD100
#D2D755
#8BD3E6
<div class="row">
<div class="col-lg-4"><div class="yellow rounded p-2">BRIGHTER WORLD YELLOW<br>#FFD100</div></div>
<div class="col-lg-4"><div class="lime rounded p-2">BRIGHTER WORLD LIME<br>#D2D755</div></div>
<div class="col-lg-4"><div class="sky-blue rounded p-2">BRIGHTER WORLD SKY BLUE<br>#8BD3E6</div></div>
</div>
Darker Tones
Used only to contrast the highlights in the duotone images. The Darker Tones palette is intended to add contrast where a darker colour is necessary to retain clarity of detail in a photograph. Because of its strong impact, use the darker red judiciously.
#A6192E
#007B4B
#007096
<div class="row">
<div class="col-lg-4"><div class="red rounded p-2">BRIGHTER WORLD RED<br>#A6192E</div></div>
<div class="col-lg-4"><div class="green rounded p-2">BRIGHTER WORLD GREEN<br>#007B4B</div></div>
<div class="col-lg-4"><div class="blue rounded p-2">BRIGHTER WORLD BLUE<br>#007096</div></div>
</div>