Digital pattern library

Colours

Palettes

Palettes are collections of brand colours that are selected to form the colour schemes for webpages. Constraining our design to a few colours helps give a consistent, professional appearance.


Approved colours

These are the approved colours for use on webpages at the University of St Andrews.

Blue

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Light blue

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Red

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Yellow

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Grey

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Light grey

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Dark grey

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Cyan

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Light cyan

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Orange

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Green

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Dark green

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Purple

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Burgundy

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Bootstrap contexts

These colours should only be used for buttons, alerts, and text banners.

Success (green)

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Info (blue light)

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Warning (orange)

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)

Danger (red)

Base

RGB: rgba(0, 0, 0, 0)

Selected

RGB: rgba(0, 0, 0, 0)

Transparent

RGB: rgba(0, 0, 0, 0)

Base hover

RGB: rgba(0, 0, 0, 0)

Selected hover

RGB: rgba(0, 0, 0, 0)

Transparent hover

RGB: rgba(0, 0, 0, 0)