Skip to main content
Table of Contents

Color

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.

Table of Contents

UI colors

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. Colors in the 600, 700, and 800 ranges have a WCAG AA ratio above 4.5:1 against white or 100 backgrounds (excluding yellow-600). The 800 color range has AAA contrast ratios above 7:1 against white and 100 backgrounds.

  • 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. Each color has a light and dark hue with a default and muted variant. Muted colors are denoted by an M prefix, like M400.

The default color variants should be used for small UI elements when the design requires a vibrant color. The muted variants are for applications with larger floods of color like data visualization and infographics. Colors in the 400 range meet a minimum contrast of 3:1 on white backgrounds (excluding lemon and lime-400). Colors in the 600 range meet a 4.5:1 contrast ratio on white backgrounds (excluding lemon).

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

  • support
    #00a656
  • explore
    #30aabc
  • gather
    #f6c8be
  • guide
    #eb4962
  • chat
    #f79a3e
  • talk
    #efc93d
  • sell
    #c38f00