Semantic palette
The semantic palette in the NSW Email Toolkit uses colour to communicate meaning quickly. Each colour group—Success, Warning, Danger and Info—helps users scan and understand messages at a glance.
Each group has a base tone and expands across 19 shades (from 50 to 950), giving consistent options for backgrounds, borders, icons and text. Colour tokens are available in HEX, RGB, HSL and OKLCH formats to ensure they display reliably across email clients.
Why so many shades?
HTML emails need fine control over colour and contrast because email clients render colours differently. Tricks like opacity or blending often don’t work consistently.
A wide scale helps choose the right strength for different design elements:
- Light tones (50–250): subtle tinted backgrounds for callouts and banners
- Mid tones (300–450): light borders, dividers and hover states
- Solid tones (500–600): solid fills for buttons, badges and pills
- Dark tones (700–950): icons and text on light backgrounds
This approach supports clear hierarchy, meets contrast requirements for body and large text, and maintains a consistent look across layouts and devices—without relying on workarounds that some email clients may ignore.
Success
success-50
#eff9ed
success-100
#e0f3de
success-150
#d2eccf
Success 04
success-200
#c4e5c0
success-250
#aad6a5
success-300
#8fc78a
success-350
#74b76f
Success 03
success-400
#58a854
success-450
#49a146
success-500
#399936
success-550
#259224
Success 02
success-600
#008a07
success-650
#007204
success-700
#005a02
success-750
#004401
Success 01
success-800
#002f00
success-850
#002200
success-900
#001600
success-950
#000b00
Warning
warning-50
#fff3ed
warning-100
#ffe8de
warning-150
#ffddcf
Warning 04
warning-200
#fdd2c0
warning-250
#f6bda5
warning-300
#eea88a
warning-350
#e6936f
Warning 03
warning-400
#dd7d53
warning-450
#d87244
warning-500
#d36734
warning-550
#ce5c21
Warning 02
warning-600
#c95000
warning-650
#a83f03
warning-700
#882f03
warning-750
#692001
Warning 01
warning-800
#4b1200
warning-850
#390a00
warning-900
#270400
warning-950
#170100
Danger
danger-50
#fff0ef
danger-100
#ffe2e1
danger-150
#ffd4d4
Danger 04
danger-200
#fdc6c6
danger-250
#f4acad
danger-300
#ea9294
danger-350
#df787c
Danger 03
danger-400
#d35d65
danger-450
#cd4e59
danger-500
#c63f4e
danger-550
#bf2c42
Danger 02
danger-600
#b81237
danger-650
#990b2a
danger-700
#7c061f
danger-750
#5f0214
Danger 01
danger-800
#44000a
danger-850
#330005
danger-900
#230002
danger-950
#140001
Info
info-50
#e9eef7
info-100
#d4ddeb
info-150
#c0cce0
Info 04
info-200
#acbbd5
info-250
#96a9cc
info-300
#8098c2
info-350
#6b86b8
Info 03
info-400
#5775ae
info-450
#4d6ca9
info-500
#4264a4
info-550
#385b9e
Info 02
info-600
#2e5299
info-650
#23427f
info-700
#193366
info-750
#10254f
Info 01
info-800
#071738
info-850
#040f2a
info-900
#02071c
info-950
#00030f