Colour

Always use our colour palette when designing your sites.

Using colours accessibly

Colour contrast

You must make sure all colour combinations meet level AA of the Web Content Accessibility Guidelines (WCAG 2.2).

You can use the WebAIM colour contrast checker to check the contrast levels of colour combinations.

Colour as meaning

Not everyone perceives colour in the same way, so you must not rely on colour alone to communicate information.

For example, do not rely on using the Commons green for someone to know that information relates to the House of Commons. Instead, include clear text to explain it.

Colour use

We have a broad colour palette. However, for consistency you must use colours in the following ways:

Text

Short text $colour-deep-purple #373151

Short blocks of text. For example, titles and headings.

Long text $colour-grey-2 #4D4D4D

Long blocks of text. For example, the main body of a page.

Supplementary text $colour-grey-3 #717171

Text that needs less prominence. For example, the date something was published.

Inverse text $colour-white #FFFFFF

Use to provide accessible colour contrast when text is on a dark coloured background. For example, deep purple, Commons or Lords.

Interaction

Standard default $colour-blue #3569CC

The main colour to highlight an element is interactive.

Standard hover $colour-blue-dark #214282

Hover colour used with Standard default.

Inverse default $colour-white #FFFFFF

Use to provide accessible colour contrast against a dark coloured background. For example, deep purple, Commons or Lords.

Inverse hover $colour-grey-5 #F0F0F0

Hover colour used with Inverse default.

Focus state outer ring $colour-mint #96DCBE

Use for the outer ring of the focus state when on, or next to, a dark background colour. This will help meet the minimum contrast ratio.

Focus state inner ring $colour-black #212121

Use for the inner ring of the focus state when on, or next to, a light background colour. This will help meet the minimum contrast ratio.

Focus background $colour-white #FFFFFF

On focus any background colour(s) is changed to white.

Focus text and icons $colour-black #212121

On focus and text or icons are changed to black.

Background

Page $colour-westminster-white #EBE9E8

Main page background.

Container standard $colour-white #FFFFFF

Use for elements that sit on top of the page background.

Container alternative $colour-grey-6 #F8F7F7

Use for elements that sit on top of Container standard.

Border

Standard $colour-grey-4 #CBC9CD

Use on light backgrounds.

Inverse $colour-white 25% opacity RGBA 255,255,255,.25

Use on dark backgrounds.

Form elements

Input border $colour-grey-3 #717171

Used for all form element borders.

Labels and legends $colour-grey-2 #4D4D4D

Used for all form labels and legends.

Hint text $colour-grey-3 #717171

Used to match other supplementary text.

Input text $colour-grey-2 #4D4D4D

Used to match other supplementary text.

Markers $colour-grey-3 #717171

Matches the border colour and is used for elements like the tick in a checkbox.

Errors $colour-red-3 #DA1014

Matches the border colour and is used for elements like the tick in a checkbox.

Brand

UK Parliament $colour-deep-purple #373151

UK Parliament’s main brand colour. Use for anything that isn’t specifically related to a House or a joint committee.

Commons $colour-commons #006548

Use for House of Commons only.

Lords $colour-lords #B50938

Use for House of Lords only.

States

Error light $colour-error-light #F7CBCC

Error dark $colour-error-dark #A72326

Success light $colour-success-light #D9FFF0

Success dark $colour-success-dark #0D9D56

Warning light $colour-warning-light #FEF3C7

Warning dark $colour-warning-dark #E0B507

Brand theming

When to use brand theming

Use brand theming when you want the colour to change dynamically based on where it is being used.

There are four brands:

  • General: neutral brand, which is not specific to any House at all
  • House of Commons
  • House of Lords
  • Bicameral/joint: for joint houses/bicameral

There are two components that use brand theming:

When not to use brand theming

If you need a colour to stay the same regardless of where it is being used, use the appropriate brand colour token listed above.

How to use brand theming

To pass the correct brand theme to elements on the page you need to set the theme in the <body> element of the HTML. If no theme is defined the general brand theme is applied by default.

This means that if you are using one of the components listed above it will automatically display using the general brand theme set in the <body>.

The classes for the different themes are:

  • General <body class="brand-general">
  • House of Commons <body class="brand-commons">
  • House of Lords <body class="brand-lords">
  • Bicameral <body class="brand-bicameral">

Other colours

Other colours are available in the code base and these are listed below. If you're using any of these, please replace them with the colours above.

Grey

  • Grey 1 $colour-grey-1 #393939

House

  • Commons dark $colour-commons-dark #005434
  • Lords dark $colour-lords-dark #9D0830
  • Bicameral purple $colour-bicameral #5F2DB4
  • Bicameral dark $colour-bicameral-dark #3E1D78

Mint

  • Mint dark $colour-mint-dark #6EC29E
  • Mint light $colour-mint-light #DFF4EB

Purple

  • Deep purple light $colour-deep-purple-light #625A75
  • Deep purple lighter $colour-deep-purple-lighter lighten($colour-deep-purple-light, 15%)
  • Purple $colour-purple #5F2DB4
  • Purple dark $colour-purple-dark #3E1D78;
  • Purple light $colour-purple-light #E7DFF4
  • Purple lighter $colour-purple-lighter lighten($colour-purple-light, 6%)

State

  • Info $colour-info #E7DFF4
  • Info dark $colour-info-dark #5F2DB4
  • Neutral $colour-neutral #EBE9E8
  • Neutral dark $colour-neutral-dark #4D4D4D

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.