A NSW Government website
Design System v3.0.5

Colour

🔹 Needed for NSW Government Branding

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

Design System base colour theme

The design system contains a colour scheme using NSW Government brand colours, which may be changed if your product is brand exempt.

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 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.

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 (Default) 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 to build a structured interface.

Swatch

Colour

Hex value

CSS variable

Black

#000000

--nsw-palette-black

White

#FFFFFF

--nsw-palette-white

Off white

#F2F2F2

--nsw-palette-off-white

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

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

Text focus

#0085B3

--nsw-focus

Text hover background

rgb(0, 133, 179, 0.2)

--nsw-text-hover-bg

Text visited

#551A8B

--nsw-text-visited

Status colours

Used for providing contextual or transactional feedback to the user. Refer to individual component guidance on when each colour should be used.

Swatch

Colour

Hex value

CSS variable

Info Blue

#2E5299

--nsw-status-info-blue

Info Blue Bg

#EAEDF4

--nsw-status-info-blue-bg

Success Green

#00A908

--nsw-status-success-green

Success Green Bg

#E5F6E6

--nsw-status-success-green-bg

Warning Orange

#DC5800

--nsw-status-warning-orange

Warning Orange Bg

#FBEEE5

--nsw-status-warning-orange-bg 

Error Red

#B81237 --nsw-status-error-red

Error Red Bg

#E81745 --nsw-status-error-red-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

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

Pink 01

#65004D

--nsw-palette-pink-01

Pink 02

#D912AE

--nsw-palette-pink-02

Pink 03

#F4B5E6

--nsw-palette-pink-03

Pink 04

#FDDEF2

--nsw-palette-pink-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

Black

#000000

--nsw-palette-black

White

#FFFFFF

--nsw-palette-white

Off white

#F2F2F2

--nsw-palette-off-white

Focus

#0085B3

--nsw-palette-focus

Hover

RGBA(0, 133, 179, 0.2)

--nsw-palette-hover

Visited

#551A8B

--nsw-palette-visited

Info blue

#2E5299

--nsw-palette-info-blue

Info blue-bg

#EAEDF4

--nsw-palette-info-blue-bg

Success green

#00A908

--nsw-palette-success-green

Success green-bg

#E5F6E6

--nsw-palette-success-green-bg

Warning orange

#DC5800

--nsw-palette-warning-orange

Warning orange-bg

#FBEEE5

--nsw-palette-warning-orange-bg

Error red

#B81237

--nsw-palette-error-red

Error red-bg

#F7E7EB

--nsw-palette-error-red-bg