Skip to main content
Table of Contents

Palette

The palette provides the colors used within Garden.

Table of Contents
Used for this
  • To reference brand colors specific to Zendesk products
  • To directly access hue[shade] color hex values
Not for this
  • To style custom components with Garden, access the palette through the theme.palette API instead
  • To extend Garden with reusable components that respond to theming, use the getColor utility with the theme.colors API instead

What it is

PALETTE

The following JSON displays the palette object in its entirety.

{  "black": "#000",  "white": "#fff",  "product": {    "support": "#00a656",    "explore": "#30aabc",    "gather": "#f6c8be",    "guide": "#eb4962",    "chat": "#f79a3e",    "talk": "#efc93d",    "sell": "#c38f00"  },  "grey": {    "100": "#f8f9f9",    "200": "#e8eaec",    "300": "#d8dcde",    "400": "#b0b8be",    "500": "#919ca5",    "600": "#848f99",    "700": "#5c6970",    "800": "#39434b",    "900": "#293239",    "1000": "#1c2227",    "1100": "#151a1e",    "1200": "#0a0d0e"  },  "blue": {    "100": "#edf7ff",    "200": "#ddecf8",    "300": "#cce0f1",    "400": "#93bcdc",    "500": "#66a0cd",    "600": "#2694d6",    "700": "#1f73b7",    "800": "#13456d",    "900": "#0f3655",    "1000": "#0a2338",    "1100": "#061420",    "1200": "#040d15"  },  "red": {    "100": "#fff2f3",    "200": "#fee3e5",    "300": "#f5d5d8",    "400": "#f2a1a8",    "500": "#ea7881",    "600": "#eb5c69",    "700": "#cd3642",    "800": "#7e1d25",    "900": "#671219",    "1000": "#3d1418",    "1100": "#1d1011",    "1200": "#100b0c"  },  "yellow": {    "100": "#fff3e4",    "200": "#ffe6cb",    "300": "#fed6a9",    "400": "#fca347",    "500": "#e38215",    "600": "#d67305",    "700": "#ac5918",    "800": "#673515",    "900": "#4c2c17",    "1000": "#2d1e15",    "1100": "#18120f",    "1200": "#0e0c0b"  },  "green": {    "100": "#eef8f4",    "200": "#daeee6",    "300": "#cae3d9",    "400": "#94c1b0",    "500": "#4eab89",    "600": "#26a178",    "700": "#037f52",    "800": "#104b35",    "900": "#0b3b29",    "1000": "#0c261c",    "1100": "#0a1511",    "1200": "#080d0c"  },  "kale": {    "100": "#ecf9f9",    "200": "#daeded",    "300": "#cbe2e1",    "400": "#97bfbf",    "500": "#6ba4a5",    "600": "#4a9999",    "700": "#40787a",    "800": "#16494f",    "900": "#063940",    "1000": "#03252a",    "1100": "#061517",    "1200": "#060e0e"  },  "fuschia": {    "100": "#fbf3f8",    "200": "#f7e6f1",    "300": "#f2d5e7",    "400": "#e3a4cc",    "500": "#d77db7",    "600": "#d16aac",    "700": "#b34496",    "800": "#78116c",    "900": "#5a0d51",    "1000": "#3f0939",    "1100": "#31072c",    "1200": "#1b0418"  },  "pink": {    "100": "#fcf3f4",    "200": "#f7e5e8",    "300": "#f3d6dc",    "400": "#e5a6b4",    "500": "#d98193",    "600": "#d96b81",    "700": "#d62054",    "800": "#75263d",    "900": "#561d2e",    "1000": "#3c141f",    "1100": "#2e0f18",    "1200": "#17080c"  },  "crimson": {    "100": "#fbf3f2",    "200": "#f7e7e4",    "300": "#f1d7d2",    "400": "#e2aaa0",    "500": "#d58678",    "600": "#cf7464",    "700": "#be4938",    "800": "#811b12",    "900": "#61140d",    "1000": "#440e09",    "1100": "#340b07",    "1200": "#1c0604"  },  "orange": {    "100": "#fdf3ed",    "200": "#fae7d8",    "300": "#f7d7be",    "400": "#eda875",    "500": "#e58035",    "600": "#d57428",    "700": "#af5626",    "800": "#693317",    "900": "#4d2711",    "1000": "#361a0c",    "1100": "#291409",    "1200": "#150a04"  },  "lemon": {    "100": "#fff7d4",    "200": "#ffea97",    "300": "#ffdc4f",    "400": "#efab00",    "500": "#c79100",    "600": "#b68500",    "700": "#8f6900",    "800": "#563e00",    "900": "#3f2e00",    "1000": "#2b2000",    "1100": "#221800",    "1200": "#110c00"  },  "lime": {    "100": "#ecfae7",    "200": "#d1f3c7",    "300": "#b3eda3",    "400": "#4fd12b",    "500": "#45b025",    "600": "#509f2d",    "700": "#3d7e19",    "800": "#2c491b",    "900": "#203614",    "1000": "#16250e",    "1100": "#111d0a",    "1200": "#090e05"  },  "mint": {    "100": "#d6ffeb",    "200": "#9affce",    "300": "#0afe89",    "400": "#00d26d",    "500": "#01b15c",    "600": "#16a260",    "700": "#2d7e55",    "800": "#1b4b33",    "900": "#143726",    "1000": "#0e261a",    "1100": "#0b1d14",    "1200": "#050e0a"  },  "teal": {    "100": "#d4fefa",    "200": "#88fdf1",    "300": "#0bf8e1",    "400": "#03cdb8",    "500": "#02ad9c",    "600": "#2a9d8f",    "700": "#367a74",    "800": "#254846",    "900": "#1b3534",    "1000": "#122423",    "1100": "#0e1c1a",    "1200": "#070d0d"  },  "azure": {    "100": "#eff7fe",    "200": "#d9ecfc",    "300": "#c4e0fa",    "400": "#82bcf4",    "500": "#4b9fee",    "600": "#3191ea",    "700": "#2770c3",    "800": "#23446b",    "900": "#1a3250",    "1000": "#122238",    "1100": "#0e1a2a",    "1200": "#070d14"  },  "royal": {    "100": "#f4f5fc",    "200": "#e7e9f8",    "300": "#d8dcf4",    "400": "#acb4e7",    "500": "#8a96dd",    "600": "#7a88d9",    "700": "#4c67d3",    "800": "#1833ab",    "900": "#122680",    "1000": "#0d1a5a",    "1100": "#0a1445",    "1200": "#050a25"  },  "purple": {    "100": "#f9f3fb",    "200": "#f2e7f6",    "300": "#e9d8f1",    "400": "#d0a9e0",    "500": "#bb86d3",    "600": "#b276cd",    "700": "#9256b1",    "800": "#58209a",    "900": "#411973",    "1000": "#2e1150",    "1100": "#230d3f",    "1200": "#120720"  }}

Configuration

  • Name9.0.0-next.26•View source•View on npm
  • Installnpm install @zendeskgarden/react-theming
  • Depsnpm install react react-dom styled-components
  • Importimport { PALETTE } from '@zendeskgarden/react-theming'