Colour
We have extended the NHS design system colour palette with tints and shades for usage on the tag and card links components.
| Tints | ||
| nhsapp-colour("pale-red") | #f7d4d1 | |
|---|---|---|
| nhsapp-colour("pale-yellow") | #fff7b1 | |
| nhsapp-colour("pale-green") | #cce5d8 | |
| nhsapp-colour("pale-aqua-green") | #c9e3e0 | |
| nhsapp-colour("pale-blue") | #ccdff1 | |
| nhsapp-colour("pale-purple") | #ded6e8 | |
| nhsapp-colour("pale-pink") | #efd3e3 | |
| nhsapp-colour("pale-orange") | #fbe8cc | |
| Shades | ||
| nhsapp-colour("dark-red") | #801810 | |
|---|---|---|
| nhsapp-colour("dark-yellow") | #4c4612 | |
| nhsapp-colour("dark-green") | #004c23 | |
| nhsapp-colour("dark-aqua-green") | #1e403d | |
| nhsapp-colour("dark-blue") | #00386e | |
| nhsapp-colour("dark-purple") | #402463 | |
| nhsapp-colour("dark-pink") | #681645 | |
| nhsapp-colour("dark-orange") | #5f3800 | |
Accessibility
Follow the NHS design system guidance on colour accessibility.
Help improve these styles
The NHS App design system team would like to hear:
- how you have used these styles in your service
- any feedback you have about its usage, for example accessibility or ideas for improvement
Add these comments to the 'Colour' discussion on GitHub.