Colour
Always use the MOD.UK colour palette.
Colour contrast
You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Main colours
If you are using MOD.UK Frontend, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. For example, use $moduk-brand-colour rather than #532a45. This means that your service will always use the most recent colour palette whenever you update.
$moduk-brand-colour | #532a45 |
|---|
Colour palette
You can use all our colours in tints of 80%, 60%, 40% and 20%.
Our colours are based on the Ministry of Defence brand guidelines 2021 (requires sign in).
moduk-colour('dark-purple') | #532a45 |
|---|---|
moduk-colour('dark-grey') | #323e48 |
moduk-colour('dark-blue') | #13284c |
moduk-colour('dark-green') | #153e35 |
moduk-colour('dark-yellow') | #f6a800 |
moduk-colour('dark-orange') | #e0592b |
moduk-colour('dark-pink') | #8e1537 |
moduk-colour('muted-purple') | #94368d |
|---|---|
moduk-colour('muted-grey') | #7b98ac |
moduk-colour('muted-blue') | #4298cc |
moduk-colour('muted-green') | #00945f |
moduk-colour('muted-yellow') | #ffc845 |
moduk-colour('muted-orange') | #f28b00 |
moduk-colour('muted-pink') | #fa7699 |
moduk-colour('bright-purple') | #ab92e1 |
|---|---|
moduk-colour('bright-grey') | #becdd6 |
moduk-colour('bright-blue') | #3db5e6 |
moduk-colour('bright-green') | #00ce7d |
moduk-colour('bright-yellow') | #ffc600 |
moduk-colour('bright-orange') | #ff8200 |
moduk-colour('bright-pink') | #f087cf |