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.