Colour
On this page
Our colours are used throughout all channels and are present in most touch points with the brand.
Brand
These four brand colours are for use on all masterbrand and co-branding identities, digital products and services.
Co-branded entities that have approval and exemption, can customise the NSW Primary Highlight colour to match their visual identity system.
| Colour | Name | Hex Value |
|---|---|---|
|
|
NSW Primary Blue | #002664 |
|
|
NSW Primary Highlight | #D7153A |
|
|
NSW Secondary Blue | #2E5299 |
|
|
NSW Tertiary Blue | #0085B3 |
Fills and strokes
Fill and stroke colours should be universally applied across all NSW branded digital products and services.
These colours can be use in header and footer backgrounds, card backgrounds, borders, divider lines etc.
| Colour | Name | Hex Value |
|---|---|---|
|
|
White | #FFFFFF |
|
|
Light10 |
#F4F4F7 |
|
|
Light20 |
#E4E4E6 |
|
|
Light40 |
#A0A5AE |
|
|
Dark60 | #6D7079 |
|
|
Dark70 | #4C4F55 |
|
|
Dark80 | #333333 |
Notifications
The notification colours are used to provide the customer with contextual or transactional feedback. Refer to the relevant component for rules on when each colour should be used.
| Colour | Name | Hex Value |
|---|---|---|
|
|
Info Blue | #2E5299 |
|
|
Success Green | #00A908 |
|
|
Warning Orange | #DC5800 |
|
|
Error Red | #B81237 |
Colour contrast
The Web Content Accessibility Guidelines (WCAG 2.1) recommend that text contrasts with its background at a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point or at least 14 point when bolded). It is also recommends user interface elements (and their states), as well as parts of graphics required to understand any content meet or exceed a ratio of 3:1.
Several tools can help check colour contrast ratios, such as WebAIM colour contrast checker.
To facilitate in the selection of compliant contrast ratios, please use the following chart comparing NSW Design System colours.
