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

Blue25% tint

Blue50% tint

Blue25% shade

Light bluePrimary

Use for main links and buttons.

Light blue25% tint

Light blue50% tint

Light blue25% shade

RedPrimary

Red25% tint

Red50% tint

Red25% shade

Dark greyPrimary

Use for main text.

Grey

Mid grey

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.

Success

Information

Warning

Danger


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.

Colour Dark text
#202024
Light text
#ffffff
UI element
Blue (Primary)
#00539b
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Blue (25% tint)
#407eb4
Normal: Fail
Large: Pass
Normal: Fail
Large: Pass
Pass
Blue (50% tint)
#80a9cd
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Blue (25% shade)
#003e74
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Light blue (Primary)
#0071b3
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass
Light blue (25% tint)
#4095c6
Normal: Pass
Large: Pass
Normal: Fail
Large: Pass
Pass
Light blue (50% tint)
#80b8d9
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Light blue (25% shade)
#005586
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Red (Primary)
#ea1a13
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass
Red (25% tint)
#ef534e
Normal: Pass
Large: Pass
Normal: Fail
Large: Pass
Pass
Red (50% tint)
#f58d89
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Red (25% shade)
#b0140e
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Dark grey (Primary)
#202024
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Grey
#6a6a6b
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass
Mid grey
#949494
Normal: Pass
Large: Pass
Normal: Fail
Large: Pass
Pass
Mid grey 2
#dedede
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Light grey
#f0f0f0
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Light grey 2
#fafafa
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Dark grey 2
#0f0f11
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Orange (Primary)
#ffb400
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Dark orange
#bf5909
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass
Green (Primary)
#00853f
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass
Green (25% tint)
#40a46f
Normal: Pass
Large: Pass
Normal: Fail
Large: Pass
Pass
Green (50% tint)
#80c29f
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Green (25% shade)
#00642f
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Purple (Primary)
#7b439a
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Purple (25% tint)
#9c72b3
Normal: Fail
Large: Pass
Normal: Fail
Large: Pass
Pass
Purple (50% tint)
#bda1cd
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Purple (25% shade)
#5c3274
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Burgundy (Primary)
#c60c46
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Burgundy (25% tint)
#d44974
Normal: Fail
Large: Pass
Normal: Fail
Large: Pass
Pass
Burgundy (50% tint)
#e386a3
Normal: Pass
Large: Pass
Normal: Fail
Large: Fail
Fail
Burgundy (25% shade)
#950935
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Success
#00853f
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass
Information
#00539b
Normal: Fail
Large: Fail
Normal: Pass
Large: Pass
Pass
Warning
#bf5909
Normal: Pass
Large: Pass
Normal: Pass
Large: Pass
Pass
Danger
#ea1a13
Normal: Fail
Large: Pass
Normal: Pass
Large: Pass
Pass