The Zendesk Garden color system is a set of purposeful colors designed with brand personality, usability, and accessibility in mind. The system is broken down into two core palettes: UI and brand.
The UI colors are used when creating interface elements. Each color has been
designed to meet accessibility requirements.
Primary colors
Primary colors are used for the structure of interfaces, actionable items,
and validation.
grey-100#f8f9f9
grey-200#e8eaec
grey-300#d8dcde
grey-400#b0b8be
grey-500#919ca5
grey-600#848f99
grey-700#5c6970
grey-800#39434b
grey-900#293239
grey-1000#1c2227
grey-1100#151a1e
grey-1200#0a0d0e
kale-100#ecf9f9
kale-200#daeded
kale-300#cbe2e1
kale-400#97bfbf
kale-500#6ba4a5
kale-600#4a9999
kale-700#40787a
kale-800#16494f
kale-900#063940
kale-1000#03252a
kale-1100#061517
kale-1200#060e0e
blue-100#edf7ff
blue-200#ddecf8
blue-300#cce0f1
blue-400#93bcdc
blue-500#66a0cd
blue-600#2694d6
blue-700#1f73b7
blue-800#13456d
blue-900#0f3655
blue-1000#0a2338
blue-1100#061420
blue-1200#040d15
green-100#eef8f4
green-200#daeee6
green-300#cae3d9
green-400#94c1b0
green-500#4eab89
green-600#26a178
green-700#037f52
green-800#104b35
green-900#0b3b29
green-1000#0c261c
green-1100#0a1511
green-1200#080d0c
red-100#fff2f3
red-200#fee3e5
red-300#f5d5d8
red-400#f2a1a8
red-500#ea7881
red-600#eb5c69
red-700#cd3642
red-800#7e1d25
red-900#671219
red-1000#3d1418
red-1100#1d1011
red-1200#100b0c
yellow-100#fff3e4
yellow-200#ffe6cb
yellow-300#fed6a9
yellow-400#fca347
yellow-500#e38215
yellow-600#d67305
yellow-700#ac5918
yellow-800#673515
yellow-900#4c2c17
yellow-1000#2d1e15
yellow-1100#18120f
yellow-1200#0e0c0b
Secondary colors
Secondary colors are used in supplementary UI elements such as icons, tags,
status badges, and illustrations.
purple-100#f9f3fb
purple-200#f2e7f6
purple-300#e9d8f1
purple-400#d0a9e0
purple-500#bb86d3
purple-600#b276cd
purple-700#9256b1
purple-800#58209a
purple-900#411973
purple-1000#2e1150
purple-1100#230d3f
purple-1200#120720
royal-100#f4f5fc
royal-200#e7e9f8
royal-300#d8dcf4
royal-400#acb4e7
royal-500#8a96dd
royal-600#7a88d9
royal-700#4c67d3
royal-800#1833ab
royal-900#122680
royal-1000#0d1a5a
royal-1100#0a1445
royal-1200#050a25
fuschia-100#fbf3f8
fuschia-200#f7e6f1
fuschia-300#f2d5e7
fuschia-400#e3a4cc
fuschia-500#d77db7
fuschia-600#d16aac
fuschia-700#b34496
fuschia-800#78116c
fuschia-900#5a0d51
fuschia-1000#3f0939
fuschia-1100#31072c
fuschia-1200#1b0418
azure-100#eff7fe
azure-200#d9ecfc
azure-300#c4e0fa
azure-400#82bcf4
azure-500#4b9fee
azure-600#3191ea
azure-700#2770c3
azure-800#23446b
azure-900#1a3250
azure-1000#122238
azure-1100#0e1a2a
azure-1200#070d14
pink-100#fcf3f4
pink-200#f7e5e8
pink-300#f3d6dc
pink-400#e5a6b4
pink-500#d98193
pink-600#d96b81
pink-700#d62054
pink-800#75263d
pink-900#561d2e
pink-1000#3c141f
pink-1100#2e0f18
pink-1200#17080c
teal-100#d4fefa
teal-200#88fdf1
teal-300#0bf8e1
teal-400#03cdb8
teal-500#02ad9c
teal-600#2a9d8f
teal-700#367a74
teal-800#254846
teal-900#1b3534
teal-1000#122423
teal-1100#0e1c1a
teal-1200#070d0d
crimson-100#fbf3f2
crimson-200#f7e7e4
crimson-300#f1d7d2
crimson-400#e2aaa0
crimson-500#d58678
crimson-600#cf7464
crimson-700#be4938
crimson-800#811b12
crimson-900#61140d
crimson-1000#440e09
crimson-1100#340b07
crimson-1200#1c0604
mint-100#d6ffeb
mint-200#9affce
mint-300#0afe89
mint-400#00d26d
mint-500#01b15c
mint-600#16a260
mint-700#2d7e55
mint-800#1b4b33
mint-900#143726
mint-1000#0e261a
mint-1100#0b1d14
mint-1200#050e0a
orange-100#fdf3ed
orange-200#fae7d8
orange-300#f7d7be
orange-400#eda875
orange-500#e58035
orange-600#d57428
orange-700#af5626
orange-800#693317
orange-900#4d2711
orange-1000#361a0c
orange-1100#291409
orange-1200#150a04
lime-100#ecfae7
lime-200#d1f3c7
lime-300#b3eda3
lime-400#4fd12b
lime-500#45b025
lime-600#509f2d
lime-700#3d7e19
lime-800#2c491b
lime-900#203614
lime-1000#16250e
lime-1100#111d0a
lime-1200#090e05
lemon-100#fff7d4
lemon-200#ffea97
lemon-300#ffdc4f
lemon-400#efab00
lemon-500#c79100
lemon-600#b68500
lemon-700#8f6900
lemon-800#563e00
lemon-900#3f2e00
lemon-1000#2b2000
lemon-1100#221800
lemon-1200#110c00
Brand colors
The brand color palette contains the primary brand colors of Zendesk’s
product suite. These colors are reserved to denote elements in the UI related
to Zendesk products.