Color
Our color system enables consistency and recognition across many contexts. There are 27 sets of hues with six shades in each color set.
yarn add @workday/canvas-kit-react
yarn add @workday/canvas-kit-react
Usage Guidance
Our colors are chosen to be vibrant, create contrast, and draw attention to specific areas of the page. The entire application uses one palette to ensure a consistent product feel, no matter where the user is in their workflow.
UI Color Palettes
General
From backgrounds, to selection, to icons, these general colors apply to most pages in the Workday product.
French Vanilla 100
Soap 200
Licorice 200
Licorice 500
Blueberry 200
Blueberry 400
Type
The only colors used for our typography. For more information, check out the Type token page.
Black Pepper 400
Black Pepper 300
Licorice 300
Licorice 100
French Vanilla 100
Blueberry 400
Status
Use the following colors to denote the status of an object, task, or flow. If you're interested in displaying the status of something, check out the Status Indicator component.
Note: Do not use these colors for text, as this generally does not pass contrast ratio guidelines.
Green Apple 400
Cantaloupe 400
Cinnamon 500
Charting
Because there are many separate visual elements in charts, contrast between each section is essential. For this reason, the range of shades is larger for this part of the app. Charting colors are pulled from the Secondary palette, and can be chosen from a set of 86 shades. Charting colors are pulled from the 200-600 range. For the inactive state, the 100-level range is used. There is also a high contrast set for a pie chart using 6 or fewer items.
Web Examples
Color tokens in code come in shades from 100 (lighter) - 600 (darker). These can be used directly,
but semantic constants are preferred. Workday Canvas Colors are re-exported
from @workday/canvas-colors-web
.
import {colors} from '@workday/canvas-kit-react/tokens';colors.blueberry400;
Every color has a gradient version as well.
import {colors} from '@workday/canvas-kit-react/tokens';colors.gradients.blueberry;
Semantic Constants
To ensure consistency across implementations, our semantic constants should be used wherever possible. This allows us to swap out the color of a button or icon for example, without having to find every instance of it and change the color manually.
We have several semantic groupings:
commonColors
buttonColors
iconColors
statusColors
typeColors
import {iconColors} from '@workday/canvas-kit-react/tokens';iconColors.hover;
All Colors
Hover over a color or use your keyboard to tab to it to access a button which can be pressed to copy the hexadecimal code for that color to your clipboard.
Cinnamon
500- 100#ffefee
- 200#fcc9c5
- 300#ff867d
- 400#ff5347
- 500#de2e21
- 600#a31b12
Peach
500- 100#fff3f0
- 200#ffc2b3
- 300#ff957a
- 400#ff643d
- 500#de4721
- 600#b53413
Chili Mango
500- 100#ffe6d9
- 200#ffc7ab
- 300#ff9b69
- 400#ff671b
- 500#e04b00
- 600#a33600
Cantaloupe
500- 100#ffeed9
- 200#fcd49f
- 300#ffbc63
- 400#ffa126
- 500#f38b00
- 600#c06c00
Sour Lemon
500- 100#fff9e6
- 200#ffecab
- 300#ffda61
- 400#ffc629
- 500#ebb400
- 600#bd9100
Juicy Pear
500- 100#f7fae6
- 200#e2f391
- 300#c4de40
- 400#a8c224
- 500#8ea618
- 600#687818
Kiwi
500- 100#ecfcd7
- 200#caf593
- 300#a7e05c
- 400#77bc1f
- 500#609915
- 600#537824
Green Apple
500- 100#ebfff0
- 200#acf5be
- 300#5fe380
- 400#43c463
- 500#319c4c
- 600#217a37
Watermelon
500- 100#ebfdf8
- 200#b7edde
- 300#65ccaf
- 400#12a67c
- 500#0c7a5b
- 600#00573e
Jewel
500- 100#ebfdff
- 200#acecf3
- 300#44c8d7
- 400#1ea4b3
- 500#1a818c
- 600#156973
Toothpaste
500- 100#d7f1fc
- 200#99e0ff
- 300#40b4e5
- 400#1894c9
- 500#0271a1
- 600#005b82
Blueberry
500- 100#d7eafc
- 200#a6d2ff
- 300#40a0ff
- 400#0875e1
- 500#005cb9
- 600#004387
Plum
500- 100#e6f1ff
- 200#a6cdff
- 300#529bfa
- 400#3881e1
- 500#3166ab
- 600#264a7a
Berry Smoothie
500- 100#e8edff
- 200#c2cfff
- 300#7891ff
- 400#5e77e6
- 500#4b5eb3
- 600#3b4987
Blackberry
500- 100#f0f0ff
- 200#c3c2ff
- 300#8483e6
- 400#5c59e6
- 500#413fcc
- 600#2e2d91
Island Punch
500- 100#f5f0ff
- 200#d2befa
- 300#a88ae6
- 400#8660d1
- 500#6345a1
- 600#503882
Grape Soda
500- 100#feebff
- 200#fac0ff
- 300#de8ae6
- 400#c860d1
- 500#97499e
- 600#7c3882
Pomegranate
500- 100#ffebf3
- 200#ffbdd6
- 300#ff5c9a
- 400#f31167
- 500#c70550
- 600#99003a
Fruit Punch
500- 100#ffeeee
- 200#ffbdbd
- 300#ff7e7e
- 400#ff4c4c
- 500#e12f2f
- 600#b82828
Root Beer
500- 100#faf3f0
- 200#ebd7cf
- 300#dcbbad
- 400#ba9a8c
- 500#8c7266
- 600#664d42
Toasted Marshmallow
500- 100#fdf6e6
- 200#ebd6a9
- 300#e6bf6c
- 400#cc9e3b
- 500#b37f10
- 600#8c6000
Coconut
500- 100#f0eeee
- 200#e3dfdf
- 300#d1cbcc
- 400#b3acac
- 500#9e9595
- 600#8f8687
Cappuccino
500- 100#7a7374
- 200#706869
- 300#5e5757
- 400#4a4242
- 500#352f2f
- 600#231f20
Soap
500- 100#f6f7f8
- 200#f0f1f2
- 300#e8ebed
- 400#dfe2e6
- 500#ced3d9
- 600#b9c0c7
Licorice
500- 100#a1aab3
- 200#7b858f
- 300#5e6a75
- 400#4a5561
- 500#333d47
- 600#1f262e
French Vanilla
500- 100#ffffff
- 200#ebebeb
- 300#d4d4d4
- 400#bdbdbd
- 500#a6a6a6
- 600#8f8f8f
Black Pepper
500- 100#787878
- 200#616161
- 300#494949
- 400#333333
- 500#1e1e1e
- 600#000000
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section