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.

HERITAGE MAROON
#7A003C
HERITAGE GOLD
#FDBF57
HERITAGE GREY
#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.

LIGHT MAROON
#ac1455
HERITAGE MAROON
#7A003C
DARK MAROON
#56002a
LIGHT GREY
#efefef
COOL GREY
#dbdbdd
MEDIUM GREY
#aeb4b8
HERITAGE GREY
#5E6A71
DARK GREY
#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.

BRIGHTER WORLD YELLOW
#FFD100
BRIGHTER WORLD LIME
#D2D755
BRIGHTER WORLD SKY BLUE
#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.

BRIGHTER WORLD RED
#A6192E
BRIGHTER WORLD GREEN
#007B4B
BRIGHTER WORLD BLUE
#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>