Skip to main content

This is a new service - your feedback will help us to improve it.

Colour Palettes


About

Below are the list of West Midlands Combined Authority colour palettes.

We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.

These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.

W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.

All brand/web colours meet this criteria.

The background only colours can only be used as a background colour and they are not intended for any other use.


Using in development

WMCA SCSS

If you are using WMCA Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.

Without WMCA SCSS

If you are not using WMCA Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.

If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.


Brand colours

Primary Orange

// HEX


// SCSS VAR
$get-color(primary);

Secondary Black

// HEX


// SCSS VAR
$get-color(secondary);

Background only colours

Background

// HEX


// SCSS VAR
$get-color(background);

Black

// HEX


// SCSS VAR
$get-color(secondary);

Blue

// HEX


// SCSS VAR
$get-color(bgBlue);

Typography colours

Typography

// HEX


// SCSS VAR
$get-color(text);