Guide to Web Publishing

Use of colours

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%), supporting 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.

Primary colours

Tiles

Use light grey 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 grey.

University blue

#11451

Light grey

#f7f7f7

Transparent

Secondary colours

Tiles

Use the primary colour palete whenever you can ie. use light grey or transparent tile backgrounds. Use university blue sparingly.  This will maximise the readability of text. On occasion, you may use a secondary colour for a tile background, but never use two secondary colours on the same row. 

Call-to-action buttons

Use University blue.

Accordions

Use University blue or light grey.

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