Always use the ASP Digital 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 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.
Brand colours are not intended for universal, non-branded components (e.g. form inputs), unless the hex value has “(and component/s)” in the brand/usage column. 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
{{ aspTable({
head: [
{ text: 'Swatch example'},
{ text: 'Hex'},
{ text: 'Brand/usage'}
],
rows: [
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#2c2a29"></span>'},
{ text: '#2c2a29'},
{ text: 'ASP (and component/s)'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#005496"></span>'},
{ text: '#005496'},
{ text: 'ASP'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#009fdf"></span>'},
{ text: '#009fdf'},
{ text: 'ASP (and component/s)'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#fcc419"></span>'},
{ text: '#fcc419'},
{ text: 'ASP (and component/s)'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ae3a0c"></span>'},
{ text: '#ae3a0c'},
{ text: 'IAG
'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ce440e"></span>'},
{ text: '#ce440e'},
{ text: 'IAG'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#8e0413"></span>'},
{ text: '#8e0413'},
{ text: 'ISAB'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#cb0b0a"></span>'},
{ text: '#cb0b0a'},
{ text: 'ISAB'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#33775b"></span>'},
{ text: '#33775b'},
{ text: 'ISAB'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#53815d"></span>'},
{ text: '#53815d'},
{ text: 'ISAB'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ffcd2f"></span>'},
{ text: '#ffcd2f'},
{ text: 'Lighthouse'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#009cda"></span>'},
{ text: '#009cda'},
{ text: 'Lighthouse'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#208591"></span>'},
{ text: '#208591'},
{ text: 'NPCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#014076"></span>'},
{ text: '#014076'},
{ text: 'NPCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#004346"></span>'},
{ text: '#004346'},
{ text: 'PCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#1c5b5e"></span>'},
{ text: '#1c5b5e'},
{ text: 'PCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#26765f"></span>'},
{ text: '#26765f'},
{ text: 'PCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#67a7ab"></span>'},
{ text: '#67a7ab'},
{ text: 'PCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#f0f5f2"></span>'},
{ text: '#f0f5f2'},
{ text: 'PCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#172a3a"></span>'},
{ text: '#172a3a'},
{ text: 'PCC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#264762"></span>'},
{ text: '#264762'},
{ text: 'PPC'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#2c3e50"></span>'},
{ text: '#2c3e50'},
{ text: 'PCC / Pocketbook'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#f8f0fc"></span>'},
{ text: '#f8f0fc'},
{ text: 'PCC / Pocketbook'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#9b3388"></span>'},
{ text: '#9b3388'},
{ text: 'Pocketbook'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#1864ab"></span>'},
{ text: '#1864ab'},
{ text: 'SWROCU (and component/s)'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#212529"></span>'},
{ text: '#212529'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#343a40"></span>'},
{ text: '#343a40'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#404040"></span>'},
{ text: '#404040'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#495057"></span>'},
{ text: '#495057'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#4e5862"></span>'},
{ text: '#4e5862'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#6c757d"></span>'},
{ text: '#6c757d'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#797979"></span>'},
{ text: '#797979'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#9f9f9f"></span>'},
{ text: '#9f9f9f'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#adb5bd"></span>'},
{ text: '#adb5bd'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#bfbfbf"></span>'},
{ text: '#bfbfbf'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#dfdfdf"></span>'},
{ text: '#dfdfdf'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ffffff"></span>'},
{ text: '#ffffff'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#4a1a1a"></span>'},
{ text: '#4a1a1a'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#8a1d1d"></span>'},
{ text: '#8a1d1d'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#b42626"></span>'},
{ text: '#b42626'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#c92a2a"></span>'},
{ text: '#c92a2a'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#edb5b5"></span>'},
{ text: '#edb5b5'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#f9bca9"></span>'},
{ text: '#f9bca9'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ffe3e3"></span>'},
{ text: '#ffe3e3'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#694900"></span>'},
{ text: '#694900'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#804200"></span>'},
{ text: '#804200'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#b35d00"></span>'},
{ text: '#b35d00'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#fd9300"></span>'},
{ text: '#fd9300'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ffef9f"></span>'},
{ text: '#ffef9f'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#fff3bf"></span>'},
{ text: '#fff3bf'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#1a4a1e"></span>'},
{ text: '#1a4a1e'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#195024"></span>'},
{ text: '#195024'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#257735"></span>'},
{ text: '#257735'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#2b8a3e"></span>'},
{ text: '#2b8a3e'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#b6edb5"></span>'},
{ text: '#b6edb5'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#d3f9d8"></span>'},
{ text: '#d3f9d8'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#141b4d"></span>'},
{ text: '#141b4d'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#0c2d4a"></span>'},
{ text: '#0c2d4a'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#0b3052"></span>'},
{ text: '#0b3052'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#0f3d68"></span>'},
{ text: '#0f3d68'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#124a7e"></span>'},
{ text: '#124a7e'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#155795"></span>'},
{ text: '#155795'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#1971c2"></span>'},
{ text: '#1971c2'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#4dabf7"></span>'},
{ text: '#4dabf7'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#8ccdff"></span>'},
{ text: '#8ccdff'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#aad0f3"></span>'},
{ text: '#aad0f3'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ced4da"></span>'},
{ text: '#ced4da'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#c7dbed"></span>'},
{ text: '#c7dbed'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#dee2e6"></span>'},
{ text: '#dee2e6'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#d0ebff"></span>'},
{ text: '#d0ebff'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#e9ecef"></span>'},
{ text: '#e9ecef'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#ebeef0"></span>'},
{ text: '#ebeef0'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#e7f5ff"></span>'},
{ text: '#e7f5ff'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#f8f9fa"></span>'},
{ text: '#f8f9fa'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#582962"></span>'},
{ text: '#582962'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#752888"></span>'},
{ text: '#752888'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#e0bff8"></span>'},
{ text: '#e0bff8'},
{ text: 'Component/s only'}
]
},
{
cells: [
{ html: '<span class="asp-swatch" style="background-color:#eadfed"></span>'},
{ text: '#eadfed'},
{ text: 'Component/s only'}
]
}
]
}) }}