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
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
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
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.
Foreground: #ffffff
Foreground: #0b0c0c
Foreground: #0b0c0c
Foreground: #ffffff
Foreground: #ffffff