Colour customisation

The extended palette

Our extended colour palette has 12 colours. You can use these to customise colour schemes for graphical elements. Your elements will then fit with the other Design System components and styling.

Doing this will help you create unique, but recognisable, marketing and communications campaigns.

The extended palette has 2 colours in the primary palette. It has 10 colours in the secondary palette.

Primary palette

Colour	SCSS variable	Hex code
Blue $ds_colour__blue	#0065bd
Dark blue $ds_colour__blue--darker	#002d54

Secondary palette

Colour	SCSS variable	Hex code
Dark teal $ds_colour__dark-teal	#017878
Teal $ds_colour__teal	#28a197
Dark green $ds_colour__dark-green	#428542
Green $ds_colour__green	#5eb135
Yellow $ds_colour__yellow	#fdd522
Orange $ds_colour__orange	#f47738
Red $ds_colour__red	#d32205
Pink $ds_colour__pink	#e5007e
Purple $ds_colour__purple	#912688
Brown $ds_colour__brown	#592c20

Creating a customised colour palette

You can create custom palettes using the primary and secondary palettes. Customised palettes can include a maximum of 4 colours in total.

All custom colour palettes:

• must include the 2 blues from the primary palette to ensure a natural fit with the rest of the design
• can have 1 or 2 colours from the secondary palette

You can also add to the 3 or 4 selected palette colours:

• tints of colours from the secondary palette colours used
• any neutrals (white, black and greys)
• highlight colours drawn from the wider secondary palette to meet a specific need – for example, to represent skin tones or to include an item that has a specific colour, such as a stop sign

Colour palettes for data visualisation

We have specific palettes for charts and graphs outlined in our data visualisation: colour palettes guidance. These palettes are derived from the primary and secondary palettes with adjustments made to increase contrast between colours for more accessible data visualisation.

How to use a custom palette

You can use custom palette colours in the graphical elements of a website. Graphical elements include:

• illustrations
• imagery
• data visualisation
• animations

You should use all elements taken from the Design System without making any changes to the colour. This includes:

• components
• typography
• spacing
• interactive states

All custom palettes include core colours from the Design System. The Design System’s elements will match your custom palette without the need to change any CSS.

Accessible use of colour

Graphical elements using the custom colour palettes should meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1).

You should ensure there’s enough contrast for users to be able to identify the key elements of the design. You can check the contrast to see if colour combinations meet the required standards.

Graphical elements should avoid including text unless for decoration. You should ensure any text included is accessible to assistive technology.

Graphics which do not contain important information are considered decorative and their alternative text attribute should be left empty. The Web Accessibility Initiative alt decision tree can help clarify if your graphic requires alternative text.

You need to include an accessible alternative - like a transcript - for any text or narrated content in:

• animations
• motion graphics
• film clips

All elements meet Web Content Accessibility Guidelines.

Using the Design System with custom graphical elements will help public sector websites and services meet the required accessibility standards.

Research

We reviewed 7 design systems from a mix of public and private sector organisations.

We looked at existing colour models of the Design System including the:

• palette ranges
• colour selections
• compositions

We based the secondary palette on a range of colours already in use. We then added custom colours to meet specific needs.