Always use the ASP Digital colour palette.
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).
If you are using ASP Frontend, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. Use lowercase and the 6-digit hex version in Sass. For production (and minification) use the 3-digit hex version within CSS.
WIP – Note/s:
Not all brand guideline colours are utilised online / listed below.
Brand colours are not intended for universal, non-branded components (e.g. form inputs), unless the brand/usage column has “(and component/s)”. These exceptions are likely historic predefined colour values (e.g. from Open Colour or Material Design) that have subsequently been adopted for component use.
Branded components (e.g. headers, footers, signage in some cases, and links) may use brand colours where the purpose is to reinforce the brand identity.
1 colour has been adopted as an online brand colour and used across components too – #2c2a29
2 colours used for digital/online ASP brand, differ to brand guidelines
– digital/online #005496 = #003da5
– digital/online #fcc419 = #f2a900
The supplied SVG logo (with text) uses a blue that differs to brand guidelines
| Swatch example | Hex | Brand/usage |
|---|---|---|
| #2c2a29 | ASP (and component/s) | |
| #005496 | ASP | |
| #009fdf | ASP (and component/s) | |
| #fcc419 | ASP (and component/s) | |
| #ae3a0c | IAG | |
| #ce440e | IAG | |
| #8e0413 | ISAB | |
| #cb0b0a | ISAB | |
| #33775b | ISAB | |
| #53815d | ISAB | |
| #ffcd2f | Lighthouse | |
| #009cda | Lighthouse | |
| #208591 | NPCC | |
| #014076 | NPCC | |
| #004346 | PCC | |
| #1c5b5e | PCC | |
| #26765f | PCC | |
| #67a7ab | PCC | |
| #f0f5f2 | PCC | |
| #172a3a | PCC | |
| #264762 | PPC | |
| #2c3e50 | PCC / Pocketbook | |
| #f8f0fc | PCC / Pocketbook | |
| #9b3388 | Pocketbook | |
| #1864ab | SWROCU (and component/s) | |
| #212529 | Component/s only | |
| #343a40 | Component/s only | |
| #404040 | Component/s only | |
| #495057 | Component/s only | |
| #4e5862 | Component/s only | |
| #6c757d | Component/s only | |
| #797979 | Component/s only | |
| #9f9f9f | Component/s only | |
| #adb5bd | Component/s only | |
| #bfbfbf | Component/s only | |
| #dfdfdf | Component/s only | |
| #ffffff | Component/s only | |
| #4a1a1a | Component/s only | |
| #8a1d1d | Component/s only | |
| #b42626 | Component/s only | |
| #c92a2a | Component/s only | |
| #edb5b5 | Component/s only | |
| #f9bca9 | Component/s only | |
| #ffe3e3 | Component/s only | |
| #694900 | Component/s only | |
| #804200 | Component/s only | |
| #b35d00 | Component/s only | |
| #fd9300 | Component/s only | |
| #ffef9f | Component/s only | |
| #fff3bf | Component/s only | |
| #1a4a1e | Component/s only | |
| #195024 | Component/s only | |
| #257735 | Component/s only | |
| #2b8a3e | Component/s only | |
| #b6edb5 | Component/s only | |
| #d3f9d8 | Component/s only | |
| #141b4d | Component/s only | |
| #0c2d4a | Component/s only | |
| #0b3052 | Component/s only | |
| #0f3d68 | Component/s only | |
| #124a7e | Component/s only | |
| #155795 | Component/s only | |
| #1971c2 | Component/s only | |
| #4dabf7 | Component/s only | |
| #8ccdff | Component/s only | |
| #aad0f3 | Component/s only | |
| #ced4da | Component/s only | |
| #c7dbed | Component/s only | |
| #dee2e6 | Component/s only | |
| #d0ebff | Component/s only | |
| #e9ecef | Component/s only | |
| #ebeef0 | Component/s only | |
| #e7f5ff | Component/s only | |
| #f8f9fa | Component/s only | |
| #582962 | Component/s only | |
| #752888 | Component/s only | |
| #e0bff8 | Component/s only | |
| #eadfed | Component/s only |
Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.