Generated Scale

Lightness scale from 50 (lightest) to 950 (darkest)

Accessibility & Usage Pairings

Recommended combinations for UI components based on WCAG contrast ratios

Solid Components

Background 500
Text #FFF
Contrast
4.5:1 AA

Subtle / Soft Components

Informational Message
Background 100
Text 800
Contrast
4.5:1 AA

Outline Components

Border 300
Text 600
Contrast
4.5:1 AA