A NSW Government website
Design System v3.16.1

Colour

🔹 Needed for NSW Government Branding

Colour plays an important role in creating a consistent and strong visual identity for NSW Government digital products and services.

Design System base colour theme

The design system contains a colour framework using NSW Government brand colours, which may be changed if your brand classification allows.

The default colours reflect masterbrand corporate colour usage. It uses blues, reds and greys from the NSW Government wider colour palette to communicate a strong association with NSW Government.

Instead of using specific hex colours, using the colour framework in the design system means your styles and components will automatically re-theme if you change your core brand colours. Guidance on further theming options are available for Designing and Developing.

Brand colours

Components and core styles inherit these colours to create a consistent yet flexible theme to optimise your user's experience. The default colour palette below reflects masterbrand corporate colour usage. Visit the theming gudiance for Designing and Developing for how you can adapt your brand colour palette based on your brand classification.

You don't need to use hex colours in code

Use either CSS variables (below) or, if you're creating a one-off layout, you can use our helper classes for dark, light, and supplementary colours.

By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the Utility classes docs.

Swatch Colour Value (Hex) CSS variable

Brand Dark

Blue 01 (#002664)

--nsw-brand-dark

Brand Light

Blue 04 (#CBEDFD)

--nsw-brand-light

Brand Supplementary

Blue 02 (#146CFD)

--nsw-brand-supplementary

Brand Accent

Red 02 (#D7153A)

--nsw-brand-accent

Grey colours

Used for backgrounds, borders and divider lines to build contrast within content and components for a structured interface. Additional swatches of black and off white have been added to the digital palette to allow for greater contrast to be applied.

Swatch

Colour

Hex value

CSS variable

Black

#000000

--nsw-black

Grey 01

#22272B

--nsw-grey-01

Grey 02

#495054 --nsw-grey-02
Grey 03 #CDD3D6 --nsw-grey-03
Grey 04 #EBEBEB --nsw-grey-04

Off white

#F2F2F2

--nsw-off-white

White

#FFFFFF

--nsw-white

Text colours

This set of text colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point) to met Web Content Accessibility Guidelines (WCAG 2.1).

Swatch

Colour

Hex value

CSS variable

Text dark
For use on light backgrounds

#22272B

--nsw-text-dark

Text light
For use on dark backgrounds

#FFFFFF

--nsw-text-light

Link state colours

Link state colours are in addition to the NSW Government colour palette to maintain consistent and accessible text and not conflict with brand colours.

Swatch

Colour

Hex value

CSS variable

Link

#002664

--nsw-link

Link visited

#551A8B

--nsw-visited

Link hover background

rgba(0, 38, 100, 0.1)

--nsw-hover

Link active background

rgba(0, 38, 100, 0.2)

--nsw-active

Link focus

#0085B3

--nsw-focus

Link disabled

#8093B2

--nsw-disabled

Link dark background

#E6E9F0

--nsw-link-light

Link visited dark background

#DDD1E8

--nsw-visited-light

Link hover dark background

rgba(230, 233, 240, 0.1)

--nsw-hover-light

Link active dark background

rgba(230, 233, 240, 0.2)

--nsw-active-light

Link focus dark background

#CCE7F0

--nsw-focus-light

Link disabled dark background

#8093B2

--nsw-disabled

Status colours

Status colours are only to be used when providing contextual or transactional feedback to the user. Refer to individual colours below for when each should be used. Components using these colours also contain usage guidance.

These are in addition to the NSW Government colour palette to maintain a strong connection to their status and not conflict with brand colours. They should not be used outside their status meaning.

Swatch

Colour

Hex value

CSS variable

Info Blue
Highlight non-critical information

#2E5299

--nsw-status-info

Info Blue Bg

#EAEDF4

--nsw-status-info-bg

Success Green
Communicate a successful action

#008A07

--nsw-status-success

Success Green Bg

#E5F6E6

--nsw-status-success-bg

Warning Orange
Warn of possible negative outcome

#C95000

--nsw-status-warning

Warning Orange Bg

#FBEEE5

--nsw-status-warning-bg 

Error Red
Alert of an immediate error or blocker

#B81237 --nsw-status-error

Error Red Bg

#F7E7EB --nsw-status-error-bg

NSW Government colour palette

Use these colours to create your own NSW Design System theme. See theming guidance for designers or theming guidance for developers.

Swatch

Colour

Hex value

CSS variable

Black

#000000

--nsw-palette-black

Grey-01

#22272b

--nsw-palette-grey-01

Grey-02

#495054

--nsw-palette-grey-02

Grey-03

#cdd3d6

--nsw-palette-grey-03

Grey-04

#ebebeb

--nsw-palette-grey-04

Green-01

#004000

--nsw-palette-green-01

Green-02

#00aa45

--nsw-palette-green-02

Green-03

#a8edb3

--nsw-palette-green-03

Green-04

#dbfadf

--nsw-palette-green-04

Teal-01

#0b3f47

--nsw-palette-teal-01

Teal-02

#2e808e

--nsw-palette-teal-02

Teal-03

#8cdbe5

--nsw-palette-teal-03

Teal-04

#d1eeea

--nsw-palette-teal-04

Blue-01

#002664

--nsw-palette-blue-01

Blue-02

#146cfd

--nsw-palette-blue-02

Blue-03

#8ce0ff

--nsw-palette-blue-03

Blue-04

#cbedfd

--nsw-palette-blue-04

Purple-01

#441170

--nsw-palette-purple-01

Purple-02

#8055f1

--nsw-palette-purple-02

Purple-03

#cebfff

--nsw-palette-purple-03

Purple-04

#e6e1fd

--nsw-palette-purple-04

Fuchsia-01

#65004d

--nsw-palette-fuchsia-01

Fuchsia-02

#d912ae

--nsw-palette-fuchsia-02

Fuchsia-03

#f4b5e6

--nsw-palette-fuchsia-03

Fuchsia-04

#fddef2

--nsw-palette-fuchsia-04

Red-01

#630019

--nsw-palette-red-01

Red-02

#d7153a

--nsw-palette-red-02

Red-03

#ffb8c1

--nsw-palette-red-03

Red-04

#ffe6ea

--nsw-palette-red-04

Orange-01

#941b00

--nsw-palette-orange-01

Orange-02

#f3631b

--nsw-palette-orange-02

Orange-03

#FFCE99

--nsw-palette-orange-03

Orange-04

#fdeddf

--nsw-palette-orange-04

Yellow-01

#694800

--nsw-palette-yellow-01

Yellow-02

#faaf05

--nsw-palette-yellow-02

Yellow-03

#fde79a

--nsw-palette-yellow-03

Yellow-04

#fff4cf

--nsw-palette-yellow-04

Brown-01

#523719

--nsw-palette-brown-01

Brown-02

#b68d5d

--nsw-palette-brown-02

Brown-03

#e8d0b5

--nsw-palette-brown-03

Brown-04

#ede3d7

--nsw-palette-brown-04

White

#ffffff

--nsw-palette-white