Styles Colour
The NHS App design system used to extend the NHS design system colour palette with tints and shades, for use on the tag and card links components.
These tints and shades have now been added to the NHS design system, from version 1.7.0.
The nhsapp-colour() function has now been deprecated from version 5.4.0 and will be removed in version 6.0.0. Use nhsuk-colour() instead.
Tints |
||
nhsapp-colour("pale-red")
|
#f7d4d1 | |
|---|---|---|
nhsapp-colour("pale-yellow")
|
#fff9c4 | |
nhsapp-colour("pale-green")
|
#cce5d8 | |
nhsapp-colour("pale-aqua-green")
|
#bae6e3 | |
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")
|
#595215 | |
nhsapp-colour("dark-green")
|
#004c23 | |
nhsapp-colour("dark-aqua-green")
|
#004a45 | |
nhsapp-colour("dark-blue")
|
#003087 | |
nhsapp-colour("dark-purple")
|
#330072 | |
nhsapp-colour("dark-pink")
|
#6e234b | |
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.