Workday Canvas
CTRL K

Color Scale

Understanding the tonal scale system from 0 (lightest) to 1000 (darkest) and how to use each step for consistent visual hierarchy.

Colors are organized into scales with steps from 0 (lightest) to 1000 (darkest). Colors are designed to be perceptually balanced, ensuring consistent lightness across color families. Colors with the same step number serve similar purposes, regardless of hue.

Complete color scale showing 0-1000 progression across multiple color families demonstrating consistent lightness relationships

Scales are designed using the okLCH color space to create perceptually balanced colors. Color peak in vividness at the midpoint (500) and decrease at the tail-ends to create softer surface colors and more vibrant accents. Vividness curve diagram showing how color intensity peaks at step 500 and decreases toward extremes

Amber Exception: Due to amber’s natural color properties, its chroma peaks at lighter values (around step 300) rather than 500. This means amber uses step 400 for primary colors to maintain accessibility compliance while preserving vibrancy.

Amber vividness exception showing higher chroma around step 300–400

Perceptual uniformity demonstration showing how step 500 appears equally bright across all color families

Do
  • Apply consistent steps for similar UI elements across all color families
  • When choosing color combinations, use the contrast framework to ensure accessible contrast ratios
  • Use steps to create visual hierarchy
Don’t
  • Use steps for different purposes
  • Mix steps randomly, always consider visual hierarchy
  • Ignore contrast requirements when choosing steps

Visual hierarchy example showing how step 100 applies consistently to secondary buttons across blue, green, and red color families

Step Guidelines

Choose the right step for your UI elements:

Step usage examples showing how different steps apply to common interface elements

StepPrimary Use CaseDescription
0Page backgroundsLightest color (white in light mode, black in dark mode)
25Input backgroundsSubtle differentiation that maintains text contrast
50Subtle backgroundsLight surface backgrounds that don’t compete with primary content
100Secondary backgroundsClear hierarchy between subtle and primary content
200Divider bordersGentle separation, less harsh than stronger borders
300Container bordersStructural definition while remaining lightweight
400Disabled statesReduced contrast for disabled input borders and text
500Input bordersMeets 3:1 contrast for interactive boundaries
600Accent textBalances vividness with readability on white backgrounds
700Hover statesIncreased weight provides interaction feedback
800Body textComfortable contrast for extended reading
900Heading textStrong contrast creates content hierarchy
950Display textMaximum contrast demands immediate attention
975Dark mode backgroundsReserved for dark mode page backgrounds
1000Maximum contrastStrongest emphasis for overlays, rarely used

Steps 0–100 - Page Backgrounds

Interface showing default white page background (step 0) and subtle gray alternative background (step 50) in side-by-side layouts

Use the default page background for most use cases, especially if colors will be used on top of it.

A secondary option is needed when subtle differentiaton is needed against the background.

Do
  • Use default background for most page layouts
  • Choose subtle alternatives when background differentiation is needed
  • Apply very light backgrounds for disabled and error states
Don’t
  • Use subtle backgrounds when color overlays will be present
  • Apply alternative backgrounds without clear purpose
ColorUsage
base.0Default background color for pages
slate.50Subtle background color for pages

Step 50 - Subtle Backgrounds

Light surfaces that don’t compete with primary content.

Step 50 subtle background examples

Do
  • Use for low emphasis status indicators
  • Create subtle content zones that don’t compete with primary content
  • Apply when minimal visual presence is desired
Don’t
  • Use when content needs to stand out or grab attention
  • Apply to elements requiring clear visibility

Step 100 - Secondary Backgrounds

Clear hierarchy between subtle and primary content.

Step 100 secondary background examples

Do
  • Use for secondary button backgrounds
  • Apply to hover states for light content
  • Choose for UI elements needing moderate prominence
Don’t
  • Use for primary actions or main content
  • Apply when subtle emphasis is sufficient

Step 200, 300 - Surface Borders

Visual structures for non-interactive surfaces.

Step 200 divider borders examples

Step 200 - Gentle separation between content.

Step 300 container borders examples

Step 300** - Container borders indicating modular sections.

Do
  • Use lighter borders for list dividers and lightweight boundaries
  • Apply stronger borders for container definition and modular sections
  • Choose based on visual separation needs
Don’t
  • Use for interactive elements requiring higher contrast
  • Apply to elements needing accessibility compliance

Step 400, 500 - Interactive Elements

Step 400 disabled foregrounds/borders examples

Step 400 - Disabled states with reduced contrast.

Step 500 input borders examples

Step 500 - Interactive boundaries meeting 3:1 contrast. Midpoint with peak saturation for vibrant accents.

Do
  • Use reduced contrast for disabled states and non-interactive elements
  • Apply accessible contrast for input borders and interactive elements
  • Meet minimum WCAG 2.1 AA compliance requirements
  • Leverage peak saturation for vibrant accent colors
Don’t
  • Use disabled state colors for interactive elements
  • Apply interactive colors below minimum contrast requirements
  • Use low contrast colors for accessibility-critical elements

Step 600, 700 - Accent Backgrounds

Vibrant interactive elements with guarenteed readability with inverse text or top of default backgrounds (4.5:1 contrast).

Step 600–800 accents and 700 hover examples Step 700 hover examples

Do
  • Use for interactive accent colors, like PrimaryButton backgrounds
  • Apply to link text, error text, and hint text on default backgrounds
  • Use the next step (700) for hover states and 800 for active states
Don’t
  • Apply to secondary UI or prose text - Use when something more subtle is more appropriate

Step 800, 900, 950 - Text Hierarchy

Text contrast levels for content hierarchy and readability.

Step 800–950 text hierarchy examples

Step 800 - Comfortable contrast for extended reading and body text. Step 900 - Strong contrast for headings and important text. Step 950 - Maximum contrast for display text and hero headlines.

Do
  • Use on prose content
  • Match level of contrast to typographic hierarchy
Don’t
  • Use for secondary or instructional text (use 600 instead)
  • Use for accent text, like links (use 600 intead)

Step 975 - Dark Mode Backgrounds

Reserved for dark mode page backgrounds to maintain consistent color relationships.

Step 975 dark mode backgrounds

Do
  • Use exclusively for dark mode page backgrounds
Don’t
  • Use in light mode interfaces

Step 1000 - Overlay Backgrounds

Strongest emphasis color for alpha overlays and modal dialogs.

Step 1000 overlay backgrounds

Do
  • Use for alpha overlays and modal dialog scrims
Don’t
  • Use as solid color in interfaces

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.

FAQ Section

On this Page: