Use the background color utility to change the default background color of an element.
Format: .ds-u-fill--[COLOR NAME]-[SHADE]
Brand colors
Primary Colors
.ds-u-fill--primary-lightest
ocean-50
.ds-u-fill--primary-lighter
ocean-100
.ds-u-fill--primary-light
ocean-300
.ds-u-fill--primary
ocean-500
.ds-u-fill--primary-dark
ocean-600
.ds-u-fill--primary-darker
ocean-700
.ds-u-fill--primary-darkest
ocean-800
Secondary Colors
.ds-u-fill--secondary-lightest
spring-50
.ds-u-fill--secondary-lighter
spring-100
.ds-u-fill--secondary-light
spring-300
.ds-u-fill--secondary
spring-500
.ds-u-fill--secondary-dark
spring-600
.ds-u-fill--secondary-darker
spring-700
.ds-u-fill--secondary-darkest
spring-800
Accent colors
Primary accent colors
.ds-u-fill--accent-primary-lightest
persimmon-50
.ds-u-fill--accent-primary-lighter
persimmon-100
.ds-u-fill--accent-primary-light
persimmon-300
.ds-u-fill--accent-primary
persimmon-500
.ds-u-fill--accent-primary-dark
persimmon-600
.ds-u-fill--accent-primary-darker
persimmon-700
.ds-u-fill--accent-primary-darkest
persimmon-800
Neutral colors
.ds-u-fill--white
white-solid
.ds-u-fill--gray-lightest
granite-50
.ds-u-fill--gray-lighter
granite-100
.ds-u-fill--gray-light
granite-300
.ds-u-fill--gray
granite-500
.ds-u-fill--gray-dark
granite-700
.ds-u-fill--base
granite-900
.ds-u-fill--black
black-solid
Background Colors
.ds-u-fill--background
white-solid
.ds-u-fill--background-inverse
ocean-800
Status colors
Informational
.ds-u-fill--info-lightest
sky-50
.ds-u-fill--info-lighter
sky-100
.ds-u-fill--info-light
sky-300
.ds-u-fill--info
sky-500
.ds-u-fill--info-dark
sky-600
.ds-u-fill--info-darker
sky-700
.ds-u-fill--info-darkest
sky-800
Success
.ds-u-fill--success-lightest
spring-50
.ds-u-fill--success-lighter
spring-100
.ds-u-fill--success-light
spring-300
.ds-u-fill--success
spring-500
.ds-u-fill--success-dark
spring-600
.ds-u-fill--success-darker
spring-700
.ds-u-fill--success-darkest
spring-800
Warn
.ds-u-fill--warn-lightest
goldenrod-50
.ds-u-fill--warn-lighter
goldenrod-100
.ds-u-fill--warn-light
goldenrod-300
.ds-u-fill--warn
goldenrod-500
.ds-u-fill--warn-dark
goldenrod-600
.ds-u-fill--warn-darker
goldenrod-700
.ds-u-fill--warn-darkest
goldenrod-800
Error
.ds-u-fill--error-lightest
rose-50
.ds-u-fill--error-lighter
rose-100
.ds-u-fill--error-light
rose-300
.ds-u-fill--error
rose-500
.ds-u-fill--error-dark
rose-600
.ds-u-fill--error-darker
rose-700
.ds-u-fill--error-darkest
rose-800
Focus Colors
.ds-u-fill--focus-light
white-solid
.ds-u-fill--focus-dark
orchid-500
Additional Colors
.ds-u-fill--muted-inverse
lapis-50
.ds-u-fill--transparent
transparent
Accessibility considerations
Text contrast
WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.
Text over gradients and background images still need to meet contrast requirements.
Non-text contrast
Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.
Easily test your color combinations
Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast: