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.
Use for visible interactive graphical UI elements.
Mid grey 2
Light grey
Light grey 2
Dark grey 2
OrangePrimary
Use only to signify focus on an element.
Dark orange
Additional colours
GreenPrimary
Green25% tint
Green50% tint
Green25% shade
PurplePrimary
Purple25% tint
Purple50% tint
Purple25% shade
BurgundyPrimary
Burgundy25% tint
Burgundy50% tint
Burgundy25% shade
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.
The following table shows how the palette colours contrast as background against the common text colours (dark grey #202020 and white #ffffff) and used as a graphical UI element such as a border against a white background. You can use this colour contrast checking tool by WebAIM to test other combinations.