Triangle Skip to content
Exit nav
Search

Colour

Colour is an important part of who we are. Used wisely and creatively, our palette can 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 colour

Nottingham Blue is the key colour for the university and should feature on all assets. The deep, rich colour helps the university to be recognisable and it’s also associated with trust and respect.

Black is no longer part of the Nottingham palette and Nottingham Blue should be used as a replacement (this includes body copy).

 

Sample Nottingham Blue colour

 

There are five approved tints that can also be used for variety and to assist legibility. HEX codes have been provided for each tint, and these should be used when creating digital artwork, rather than using opacity.

You must ensure you use the correct colour output (RGB for digital and CMYK for print) for the asset and its usage.


Nottingham Blue
CMYK: 100, 79, 47, 56
RGB: R16, G38, B59
HEX: #10263B
PMS: 539 C
Tints:

80%: #405162

60%: #707D89

40%: #9FA8B1

20%: #CFD4D8

5%: #F3F4F5

Supporting palette

Our supporting colours are accents. They add warmth and vibrancy and can elevate designs. Inspired by the University of Nottingham campus, key brand messages and the city of Nottingham, nine colours build up the palette to complement our primary Nottingham Blue.

The palette should be used sparingly, with a maximum of two supporting colours in any one asset.

Where colour is used within an asset, Nottingham Blue needs to be visually dominant and the supporting palette should be less than half of the make-up of colour within the asset.

Supporting colours can and should be used for campaigns and initiatives, to help audience recognition and aid navigation.

You must ensure you use the correct colour output for the asset and its usage (RGB for digital and CMYK for print), as values have been created to keep the most vibrancy in print and the best colour representation across digital channels.

Each colour has five tints that can also be used for variety and to assist legibility. HEX codes have been provided for each tint, and these should be used when creating digital artwork, rather than using opacity.

 

Jubilee Red Mandarin Orange  Rebel’s Gold

 Sample Jubilee red colour

 Sample  Mandarin orange colour

 Sample rebel’s gold colour

CMYK: 19, 98, 80, 10

CMYK: 0, 58, 95, 0

CMYK: 14, 27, 97, 3

RGB: R185, G28, B46

RGB: R249, G129, B9

RGB: R222, G180, B6

HEX: #B91C2E

HEX: #F98109

HEX: #DEB406

Tints:

80%: #C74958

60%: #D57782

40%: #E3A4AB

20%: #F1D2D5

5%: #FCF4F5

Tints:

80%: #FA9A3A

60%: #FBB36B

40%: #FDCD9D

20%: #FEE6CE

5%: #FFF9F3

Tints:

80%: #E5C338

60%: #EBD26A

40% :#F2E19B

20%: #F8F0CD

5%: #FDFBF3

 

Pioneering Pink Civic Purple Forest Green

 Sample pioneering pink colour

 Sample Civic purple colour

 Sample Forest green colour

CMYK: 9, 91, 31, 0

CMYK: 65, 94, 2, 0

CMYK: 91, 35, 90, 31

RGB: R215, G51, B108

RGB: R121, G45, B133

RGB: R0, G95, B54

HEX: #D7336C

HEX: #792D85

HEX: #005F36

Tints:

80%: #DF5C89

60%: #E785A7

40%: #EFADC4

20%: #F7D6E2

5%: #FDF5F8

Tints:

80%: #94579D

60%: #AF81B6

40%: #C9ABCE

20%: #E4D5E7

5%: #F8F5F9

Tints:

80%: #337F5E

60%: #669F86

40%: #99BFAF

20%: #CCDFD7

5%: #F2F7F5

 

Bramley Apple Trent Turquoise Malaysia Sky Blue

 Sample Bramley apple colour

 Sample Trent turquoise colour

 Sample Malaysia sky blue colour

CMYK: 50, 0, 100, 0

CMYK: 70, 2, 37, 0

CMYK: 80, 18, 18, 0

RGB: R147, G213, B0

RGB: R55, G180, B176

RGB: R0, G155, B193

HEX: #93D500

HEX: #37B4B0

HEX: #009BC1

Tints:

80%: #A9DD33

60%: #BEE666

40%: #D4EE99

20%: #E9F7CC

5%: #FAFDF2

Tints:

80%: #5FC3C0

60%: #87D2D0

40%: #AFE1DF

20%: #D7F0EF

5%: #F5FBFB

Tints:

80%: #33AFCD

60%: #66C3DA

 40%: #99D7E6

20%: #CCEBF3

5%: #F2FAFC

 

Neutral palette

To accompany Nottingham Blue and the supporting palette, a small neutral palette can be used. This is made up of a light/warm grey and white.

These can be used on all designs where appropriate, and do not count towards the maximum two supporting colours per design and are permitted to make up over half of the designed asset, as these would be best used for text (white only) or backgrounds.

Portland Stone has a 40% tint available to create more accessible designs, more information on this can be found within the ‘digital backgrounds’ section.

Portland Stone

UoN_BrandEvolution_PortlandStone

CMYK: 3, 3, 8, 0

RGB: R250, G246, B239

HEX: #FAF6EF 

40% tint: #FDFBF9

White

White

CMYK: 0, 0, 0, 0 

RGB: R255, G255, B255

HEX: #FFFFFF

 

Recommended groupings

Here are some recommended palettes featuring a maximum of two supporting colours, however these are just recommendations and not rules. As explained in the ‘supporting palette’ section, a maximum of two supporting colours should be used in any design/asset, and Nottingham Blue should be the key colour.

Supporting colours should be used as accents, for example in illustrations, icons and calls-to-actions.

 

Sample grouping Nottingham blue and Malaysia sky blue 

Sample grouping Nottingham blue and Jubilee red 

sample grouping Nottingham blue and Pioneering pink

Sample grouping Nottingham blue and Bramley apple

Nottingham Blue

Malaysia Sky Blue 

Nottingham Blue

Jubilee Red         

Nottingham Blue

Pioneering Pink

Nottingham Blue

Bramley apple 

Sample property Nottingham blue, Forest green and Trent turquoise

Sample grouping Nottingham blue, Civic purple and Trent turquoise   

 

Sample grouping Nottingham blue, Rebel’s gold and Forest green

Sample grouping Nottingham blue, Pioneering pink and Rebel’s gold

 

Nottingham Blue

Trent Turquoise  

Forest Green

Nottingham Blue

Trent Turquoise

Civic Purple

Nottingham Blue

Forest Green 

Rebel’s Gold

Nottingham Blue

Rebel’s Gold

Pioneering Pink

 


Digital backgrounds 

Using white as a background for digital applications can be difficult to read. You should instead use either a 5% tint of Nottingham Blue or a 40% tint of Portland Stone to create more accessible designs. HEX codes can be found for these in the ‘neutral palette’ section and the ‘primary colour’ section. 

 

Portland stone and white colour sample

Body copy colour

Body copy should always be Nottingham Blue or white, for consistency and legibility. Colour contrast should be checked against the background colour for accessibility. See the accessibility chart for more information.

 

Importing swatches

The Adobe Swatch Exchange (.ase) files save our colours into the swatches in Adobe programs, such as InDesign or Illustrator. Contact the brand team to request the files. 

 

 

Accessibility

When using colour, you should always make sure you’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.

You can access the full colour contrast grid or click on the image of the grid on the right. 

Please also be aware of and check for combinations of colours that are suitable for those with Colour Vision Deficiency (otherwise known as colour blindness), before finalising colours to be used. The Colour Blind Awareness website has some useful advice on this.

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.

To help identify accessibility issues with web assets and text you can use WAVE, a free chrome extension

EightShapes-Contrast-Grid final