Guide to Web Publishing

Use of colours

Primary colours

Tiles

Use light slate or transparent tile backgrounds. Use University blue sparingly. This will maximise the readability of text.

Call-to-action buttons

Use University blue.

Accordions

Use University blue or light slate.

University blue

#11451

Light grey

#f7f7f7

Transparent

Secondary dark colours

Dark red

#7d2239

Dark blue

#005398

Dark green

#405d18

Dark pink

#a60367

Dark purple

#4c2683

Dark grey

#585858

Secondary light colours

Light yellow

#f2d25c

Light blue

#4dbbc6

Light green

#81c071

Light pink

#e98baf

Light purple

#a5a1ce

Example

Rationale

Our aim is to help you maximise the usability and readability of your web site.

3 colour rule

The '70-20-10' 3 colour rule [dominant colour (70%), secondary colour for depth (20%), accent colour (10%)] provides a simplicity and clarity to:

  • create a visually appealing balance to your design
  • prevent a page from appearing busy or clashing  
  • guide the user's eye through the content
  • increase the contrast to make your images and call-to-action buttons stand out

Readability 

Given that almost all your choice of colours will be as a background to text,  then our 70-20-10 should be:

  • 70% light grey/transparent 
  • 20% university blue
  • 10% secondary colour

By using off-white as a background colour, you will maximise the readability of text. Most people find a dark text on a light background the easiest to read.