Color Palettes
Select a theme from the dropdown to see the colors associated with that theme. Use the tone changer button to the right of the dropdown to switch between light and dark tones.Surface
color-surface-50
color-surface-100
color-surface-200
color-surface-300
color-surface-400
color-surface-500
color-surface-600
color-surface-700
color-surface-800
color-surface-900
color-surface-950
color-surface
Primary
color-primary-50
color-primary-100
color-primary-200
color-primary-300
color-primary-400
color-primary-500
color-primary-600
color-primary-700
color-primary-800
color-primary-900
color-primary-950
color-primary
Secondary
color-secondary-50
color-secondary-100
color-secondary-200
color-secondary-300
color-secondary-400
color-secondary-500
color-secondary-600
color-secondary-700
color-secondary-800
color-secondary-900
color-secondary-950
color-secondary
Warning
color-warn-50
color-warn-100
color-warn-200
color-warn-300
color-warn-400
color-warn-500
color-warn-600
color-warn-700
color-warn-800
color-warn-900
color-warn-950
color-warn
Danger
color-danger-50
color-danger-100
color-danger-200
color-danger-300
color-danger-400
color-danger-500
color-danger-600
color-danger-700
color-danger-800
color-danger-900
color-danger-950
color-danger
Success
color-success-50
color-success-100
color-success-200
color-success-300
color-success-400
color-success-500
color-success-600
color-success-700
color-success-800
color-success-900
color-success-950
color-success
Info
color-info-50
color-info-100
color-info-200
color-info-300
color-info-400
color-info-500
color-info-600
color-info-700
color-info-800
color-info-900
color-info-950
color-info
Attention
color-attention
Utility
color-valid
color-warning
color-error
Text
textColor-primary
textColor-secondary
textColor-attention
textColor-subtitle
textColor--disabled
Background
backgroundColor-primary
backgroundColor-secondary
backgroundColor-attention
backgroundColor--disabled
backgroundColor--selected