Canvas colors values in web formats.
The base Canvas color palette is available in CommonJS, ES6, JSON, LESS, and SASS formats.
Colors (100-600):
- Cinnamon
- Peach
- Chili Mango
- Cantaloupe
- Sour Lemon
- Juicy Pear
- Kiwi
- Green Apple
- Watermelon
- Jewel
- Toothpaste
- Blueberry
- Plum
- Berry Smoothie
- Blackberry
- Island Punch
- Grape Soda
- Pomegranate
- Fruit Punch
- Root Beer
- Toasted Marshmallow
- Coconut
- Cappuccino
- Soap
- Licorice
- French Vanilla
- Black Pepper
The default import will provide hex color values as strings. Colors are accessed via their camel-cased names (e.g. frenchVanilla100
).
TypeScript types are provided for convenience.
ES6 exports are located in @workday/canvas-colors-web/dist/es6
.
import colors from '@workday/canvas-colors-web'
colors.frenchVanilla100
CommonJS exports are located in @workday/canvas-colors-web/dist/commonjs
.
const colors = require('@workday/canvas-colors-web')
colors.frenchVanilla100
To access HSLA, import from canvas-colors.js
from your preferred JS format folder.
import colors from '@workday/canvas-colors-web/dist/es6/canvas-colors.js'
const colors = require('@workday/canvas-colors-web/dist/commonjs/canvas-colors.js')
colors.frenchVanilla100
Import Paths
SASS variable sheets are located in @workday/canvas-colors-web/dist/sass
. They are available as both .sass
and .scss
.
- Hex:
canvas-colors-hex.scss
- RGBA:
canvas-colors-rgba.scss
- HSLA:
canvas-colors.scss
Color variables are camel-cased.
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
$wdc-color-french-vanilla-100;
Import Paths
LESS variable sheets are located in @workday/canvas-colors-web/dist/less
.
- Hex:
canvas-colors-hex.less
- RGBA:
canvas-colors-rgba.less
- HSLA:
canvas-colors.less
Color variables are camel-cased.
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.less';
@wdc-color-french-vanilla-100;
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
delete
primary
secondary
iconColors
statusColors
typeColors
JS
import { iconColors } from '@workday/canvas-colors-web'
iconColors.hover
SCSS
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
$wdc-color-common-background;
LESS
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
@wdc-color-common-background;
The charting color palette is a set of 86 colors from the Canvas palette. Colors should be used in incremental numerical order. Offsets should also be used depending on the chart type. Color access keys start at 1
and go up to 86
.
Offsets:
- Bar and Column
- Pie
- Line and Area
- Bubble
JS
import { chartingColors, chartingColorOffsets } from '@workday/canvas-colors-web'
chartingColors[1]
chartingColors[chartingColorOffsets.barAndColumn + i]
SCSS
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
$wdc-color-charting-1;
$wdc-color-bar-and-column;
LESS
@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';
@wdc-color-charting-1;
@wdc-color-bar-and-column;
(c) Workday, Inc.