Colours
These are the approved colours for use on web sites and applications at the University of St Andrews.
Primary colours are the colours most widely used but when contrast is needed between two UI elements a tint or shade variant of a primary colour should be used. This can also be used to help show a change of state on an interactive element such as a button.
Available palettes
Main colours
BluePrimary
RGB: rgba(0, 0, 0, 0)
Blue25% tint
RGB: rgba(0, 0, 0, 0)
Blue50% tint
RGB: rgba(0, 0, 0, 0)
Blue25% shade
RGB: rgba(0, 0, 0, 0)
Light bluePrimary
Use for main links and buttons.
RGB: rgba(0, 0, 0, 0)
Light blue25% tint
RGB: rgba(0, 0, 0, 0)
Light blue50% tint
RGB: rgba(0, 0, 0, 0)
Light blue25% shade
RGB: rgba(0, 0, 0, 0)
RedPrimary
RGB: rgba(0, 0, 0, 0)
Red25% tint
RGB: rgba(0, 0, 0, 0)
Red50% tint
RGB: rgba(0, 0, 0, 0)
Red25% shade
RGB: rgba(0, 0, 0, 0)
Dark greyPrimary
Use for main text.
RGB: rgba(0, 0, 0, 0)
Grey
RGB: rgba(0, 0, 0, 0)
Mid grey
Use for visible interactive graphical UI elements.
RGB: rgba(0, 0, 0, 0)
Mid grey 2
RGB: rgba(0, 0, 0, 0)
Light grey
RGB: rgba(0, 0, 0, 0)
Light grey 2
RGB: rgba(0, 0, 0, 0)
Dark grey 2
RGB: rgba(0, 0, 0, 0)
OrangePrimary
Use only to signify focus on an element.
RGB: rgba(0, 0, 0, 0)
Dark orange
RGB: rgba(0, 0, 0, 0)
Additional colours
GreenPrimary
RGB: rgba(0, 0, 0, 0)
Green25% tint
RGB: rgba(0, 0, 0, 0)
Green50% tint
RGB: rgba(0, 0, 0, 0)
Green25% shade
RGB: rgba(0, 0, 0, 0)
PurplePrimary
RGB: rgba(0, 0, 0, 0)
Purple25% tint
RGB: rgba(0, 0, 0, 0)
Purple50% tint
RGB: rgba(0, 0, 0, 0)
Purple25% shade
RGB: rgba(0, 0, 0, 0)
BurgundyPrimary
RGB: rgba(0, 0, 0, 0)
Burgundy25% tint
RGB: rgba(0, 0, 0, 0)
Burgundy50% tint
RGB: rgba(0, 0, 0, 0)
Burgundy25% shade
RGB: rgba(0, 0, 0, 0)
Contextual colours
Colour should never be solely used to provide meaning as this is not accessible to all users. These colours should only be used for buttons, alerts, and text banners where colour is used to assist meaning.
Success
RGB: rgba(0, 0, 0, 0)
Information
RGB: rgba(0, 0, 0, 0)
Warning
RGB: rgba(0, 0, 0, 0)
Danger
RGB: rgba(0, 0, 0, 0)
Accessible colours
You must make sure that the contrast ratio of text and interactive elements in your web site or application meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
The following table shows how the palette colours contrast as a background against the common text colours (dark grey #202020 and white #ffffff). It also shows the palette colours contrast when used as a graphical UI element against a white background. This is indicated with a tick for success and a cross for failure. You can use this colour contrast checking tool by WebAIM to test other combinations.
