StylesColour

Always use the Home Office colour palette when you are designing and building internal services and products. For public facing and transactional sites use the GOV.UK colour palette.

Ask design@digital.homeoffice.gov.uk if you have any questions.

Main colours

Brand colour

#8f23b3

Purple is the Home Office's brand colour. This doesn't mean you should use it as the dominant colour in a digital interface.

Overusing the purple can make content hard to read on screen, particularly on services that are designed to be used for long periods of time.

Home Office purple works best in digital interfaces when it's just used for the Home Office logo and sparingly used as a keyline or accent.

Page background

#f1f1f1
Use light grey as the page background colour on internal services to minimise eye strain caused by high-contrast user interfaces. It's also better for readability for those with dyslexia.

Border

#cbcbcb
Use mid-grey for borders and to help define elements where needed.

Text and links

Use the GOV.UK colours for text and links as these are accessible with the Home Office page background.

Extra colours

You can use the GOV.UK colour palette alongside the main Home Office colours. Use them to create graphs and supporting materials. If you need to use tints of the palette, use either 25% or 50%.

Accessible text and background combinations

You should never use colour as the only way to convey information. You must also describe the information you're trying to convey. Always test the text and background colours to make sure they meet the minimum AA contrast ratios specified by Web Content Accessibility Guidelines (WCAG) 2.1. Below are the colour combinations that pass.

A
Background: #0b0c0c
Foreground: #ffffff
A
Background: #ffffff
Foreground: #0b0c0c
A
Background: #cbcbcb
Foreground: #0b0c0c
A
Background: #00703c
Foreground: #ffffff
A
Background: #1d70b8
Foreground: #ffffff