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
Web Install
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

Background

Soap 200

Background Alt

Licorice 200

Icon

Licorice 500

Icon Hover, Mobile Icon

Blueberry 200

Selection, Active Background

Blueberry 400

Primary Action, Focus Outline, Link

Type

The only colors used for our typography. For more information, check out the Type token page.

Black Pepper 400

Headings

Black Pepper 300

Body

Licorice 300

Hint

Licorice 100

Disabled

French Vanilla 100

Inverse

Blueberry 400

Hyperlink

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

Success

Cantaloupe 400

Alert, Warning

Cinnamon 500

Error

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.

Colors Chart

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