Our colour palette is based upon four reference colours:

Teal
Blue
Pink
Charcoal

The colours we use on the website are defined by a name (eg; blue or red) and a weight. The weight of a colour represents its luminosity and varies from 100 (lightest), to 900 (darkest) in increments of 100.

Colour values are accessible in Sass via the colour function which takes two arguments: the colour name, and its weight. Eg; colour( "blue" , 700 ) returns a medium-dark shade of blue.

Primary colours

This table represents the full spread of primary colours in our palette, with the most commonly used highlighted.

100 200 300 400 500 600 700 800 900
Grey
#f9f9f9
#E2E2E2
#CBCBCB
#B3B3B3
#9C9C9C
#868686
#6E6E6E
#585858
#404040
Blue
#D2F4FF
#9DE4FA
#69D4F5
#34C3F0
#00B3EB
#0495C3
#087396
#0C5A73
#0F3D4C
Pink
#F3D8E9
#E5BCD6
#D7A0C3
#CA86B1
#BE6C9F
#AF4E8B
#A23479
#8E2D6A
#7B285C
Beige
#F0F2E9
#DCDED0
#CACCB8
#B5B7A3
#9FA18D
#8B8D79
#767864
#60624D
#4B4D38

Highlight colours

The colours below represent our highlight colour variants. These have a more functional purpose than the primary colours and are usually used to represent warnings (yellow), errors (red), or successful actions (green).

See the alerts component for some examples.

100 200 300 400 500 600 700 800 900
Yellow
#FAF1D9
#F4E2B2
#EFD38B
#E9C463
#E4B53C
#C39A2F
#A48024
#836518
#634B0D
Red
#F4D4D4
#E4A9A9
#D58080
#C55656
#B62D2D
#9F2626
#892121
#731B1B
#5E1717
Green
#DDF4D4
#BAE4AA
#99D581
#76C557
#54b62d
#479A26
#3B7F1F
#2E6318
#224912

Usage

The website uses three background colours for most of its text-based content. For each of these we have selected and checked text and link colours to ensure that they meet accessibility guidelines:

When combining colours, be sure to check that your combinations are accessible by using a colour contrast ratio checker tool. Lea Verou's contrast-ratio.com is a popular option and Firefox's dev tools can now check your colour contrast ratios for WCAG compliance directly in the browser.

White background

  • Background: white, or colour( "grey" , 100 )
  • Text: colour( "grey" , 900 )
  • Link: colour( "blue" , 700 )
  • Link hover: colour( "blue" , 800 )

The University was created by Royal Charter and is a public higher education institution and exempt charity in England.

Beige background

  • Background: colour( "beige" , 100 )
  • Text: colour( "grey" , 900 )
  • Link: colour( "blue" , 700 )
  • Link hover: colour( "blue" , 800 )

The University was created by Royal Charter and is a public higher education institution and exempt charity in England.

Teal background

  • Background: colour( "blue" , 900 )
  • Text: white
  • Link: colour( "blue" , 500 )
  • Link hover: colour( "blue" , 400 )

The University was created by Royal Charter and is a public higher education institution and exempt charity in England.