Our brand colours help users recognise services delivered by the National Careers Service. This assures users they can trust the careers guidance and advice they receive.
Using colour
If you're using GOV.UK Frontend or the GOV.UK Prototype Kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. This means that your service will always use the most recent colour.
Colour contrast
Our text and background colours are designed to meet accessibility needs.
We meet at least level AA of the Website Content Accessibility Guidelines (WCAG) for contrast.
Brand colour
Pink is the National Careers Service's brand colour. This does not mean you should use it as the dominant colour on a website. Overusing the pink can make content hard to read on screen.
National Careers Service pink works best on websites when it's used for the National Careers Service logo and occasionally as a keyline or accent.
| Brand colour | Hex |
|---|---|
$govuk-colour("pink")
|
#d53880
|
Colour palette
Use the National Careers Service colour palette for supporting materials like illustrations or in components where appropriate.
To reference colours from the palette directly you should use the govuk-colour function. For example, color: govuk-colour("light-blue").
If you need to use tints of this palette, use either 25% or 50%.
| Colour | Hex |
|---|---|
$govuk-colour("pink")
|
#d53880
|
$govuk-colour("light-pink")
|
#f499be
|
$govuk-colour("light-blue")
|
#5694ca
|
$govuk-colour("light-blue")(25%)
|
#5694ca25
|
$govuk-colour("mid-grey")
|
#b1b4b6
|
$govuk-colour("light-grey")
|
#f3f2f1
|
$govuk-colour("dark-grey")
|
#505a5F
|
$govuk-colour("bright-purple")
|
#912b88
|
$govuk-colour("black")
|
#0b0c0c
|
$govuk-colour("white")
|
#ffffff
|
$govuk-colour("dark-blue")
|
#003078
|
GOV.UK colours
You should use the GOV.UK main colours alongside the National Careers Service colours for elements not specified here. This includes text, links and focus states.