Triangle
Exit nav
Search

Colour

Our colours are an important part of who we are. Used wisely and creatively, they have a positive impact, help people to recognise us and make our content more effective.

This page covers the topics listed below. Click on the topic to be taken to relevant information or scroll down to read the guidance in full.

Primary palette

Five blues make up our primary colour palette. Blue helps the University to be recognisable and it's also associated with trust and respect.

Whenever we use colour, blue should always be there. And not just a little bit there – 80% of our colour in any design should come from this palette.

Primary palette
 Blue one Blue two Blue three Blue four Blue five
 Blue One  Blue Two  Blue Three  Blue Four  Blue Five
C100 M1 Y24 K0 C100 M25 Y20 K8 C100 M55 Y0 K20 C100 M86 Y0 K34 C100 M90 Y0 K56
R0 G155 B189 R0 G125 B168 R0 G86 B151 R27 G42 B107 R25 G26 B79
PMS 3125 PMS 632 PMS 7462 PMS 280 PMS 274
HEX #009bbd HEX #007ca7 HEX #005597 HEX #1a296b HEX #18194f

Gradient

Our five blues can be used together as a gradient. The gradient is unique and integral to our identity.

It creates depth and texture and can be used in multiple ways across a range of materials. It further strengthens our brand identity.

Core blues

Secondary palette

Our secondary colours are accents. They add zing and make our designs sing. They should be used sparingly, and not all at once. Secondary colours can make up a maximum of 20% of the overall colour. You can also use tints of these colours in tables and charts to help with legibility.

Some colours in our secondary palette correspond with a particular faculty, but this is not mandatory or exclusive.

Brights

1
Bright pink Orange Bright red Yellow Bright green

 Foundation

 Arts

 International

 

 Science

  Bright pink-Foundation

 Orange

 Bright red-International

 Yellow

 Bright green-Science

C2 M91 Y30 K0

 C0 M50 Y100 K0

 C8 M100 Y85 K0

 C0 M22 Y100 K3

 C79 M7 Y90 K0

R229 G48 B109

R243 G146 B0

R216 G15 B42

R248 G196 B0

R38 G160 B74

HEX #e5306d

HEX #f39200

HEX #d80f2a

HEX #f8c400

HEX #26a04a

PMS 7424 C

PMS 144 C

PMS 185 C

PMS 123 C

PMS 354 C
Cools
 Cool grey Turquoise Violet

 Engineering

 Medicine and Health Sciences

 Social Sciences

 Cool grey-Engineering

 Turquoise-Medicine and Health Sciences

 Violet

C61 M31 Y38 K14

C77 M3 Y49 K0

 C69 M75 Y5 K0

R105 G138 B141

R0 G171 B151

 R108 G81 B152

HEX #68898c

HEX #00ab97

 HEX #6c5198

PMS 2211 C

PMS 2400 C

 PMS 2076 C
Neutrals
 Neutral one Neutral two White Black

 Neutral1

 Neutral 2

 

 Black

C40 M35 Y35 K15

C65 M55 Y55 K55

C0 M0 Y0 K0

C0 M0 Y0 K100

R151 G145 B142

R67 G67 B65

R255 G255 B255

R0 G0 B0

HEX #97918e

HEX #434341

HEX #FFFFFF

HEX #000000

PMS 422 C

PMS 446 C

  

PMS Process black

Faculty colours for China

China
Bright greenBright pinkOrangeViolet

 Science

 First year

Humanities and Social Sciences

Business

 Bright green-Science

 Bright pink-Foundation

 Orange

 Violet

C79 M7 Y90 K0

 C2 M91 Y30 K0

 C0 M50 Y100 K0

 C69 M75 Y5 K0

R38 G160 B74

 R229 G48 B109

 R243 G146 B0

 R108 G81 B152

HEX #26a04a

 HEX #e5306d

HEX #f39200

 HEX #6c5198

PMS 354 C

 PMS 7424 C

 PMS 144 C

 PMS 2076 C

Faculty colours for Malaysia

Malaysia
 Bright green Bright pink Cool grey Violet

 Science

 Foundation

 Engineering

 Arts and Social Sciences

Bright green-Science 

 Bright pink-Foundation

 Cool grey-Engineering

 Violet

 C79 M7 Y90 K0

 C2 M91 Y30 K0

C61 M31 Y38 K14

C69 M75 Y5 K0

 R38 G160 B74

 R229 G48 B109

R105 G138 B141

R108 G81 B152

 HEX #26a04a

HEX #e5306d

HEX #68898c

HEX #6c5198

 PMS 354 C

 PMS 7424 C

PMS 5487

PMS 2076 C

Importing swatches

Download our Adobe Swatch Exchange (.ase) file to save our colours into the swatches in Adobe programs, suchas InDesign or Illustrator.

Accessibility

When using colour, we always make sure we’re complying with accessibility guidelines.

Colour contrasts

We follow the Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium.

This handy colour contrast grid will help you check you're meeting accessibility standards when combining colours from our palettes.

Please click here to enlarge the colour contrast grid or click on the image of the grid on the right. 

Colour and text

We also use the WCAG when combining colour and text to ensure that everyone can read our content clearly. We prefer AAA compliance, but will accept AA.

  • AAA compliance requires a contrast ratio of 7:1 for small text (12-17px) and 4.5:1 for larger text (18px and over)

  • AA compliance requires a contrast ratio of 4.5:1 for small text (12-17px) and 3:1 for large text (18px and over)

Our colour accessibility chart shows the different colour combinations that work and the ones to avoid.

 

UoN Contrast grid May 2020

Colour checklist

Is it mostly blue?

Blue should always be the predominant colour. Secondary colours should only make up 20% or less of the design.

Does it look good?

Colour combinations need to make sense, aesthetically. Think of it as choosing an outfit for your content. And they need to meet accessibility guidelines.

Can you read it?

It’s important that there’s enough contrast between the background and any text to make the words easily readable. This applies to both the primary and secondary palettes, and any tints of our colours too.

Is it here?

Only use colours, or tints of colours that are featured here. Otherwise, people will get confused and mistake us for some other university (naming no names).