Canvas Colors for Web

Canvas colors values in web formats.

Usage

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

JavaScript

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

ES6 exports are located in @workday/canvas-colors-web/dist/es6.

import colors from '@workday/canvas-colors-web'

colors.frenchVanilla100

CommonJS

CommonJS exports are located in @workday/canvas-colors-web/dist/commonjs.

const colors = require('@workday/canvas-colors-web')

colors.frenchVanilla100

HSLA

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

SASS

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

Usage

Color variables are camel-cased.

@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.scss';

$wdc-color-french-vanilla-100;

LESS

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

Usage

Color variables are camel-cased.

@import '@workday/canvas-colors-web/dist/sass/canvas-colors-hex.less';

@wdc-color-french-vanilla-100;

Semantic Colors

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;

Charting Colors

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;

License

(c) Workday, Inc.