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-lightestocean-50.ds-u-fill--primary-lighterocean-100.ds-u-fill--primary-lightocean-300.ds-u-fill--primaryocean-500.ds-u-fill--primary-darkocean-600.ds-u-fill--primary-darkerocean-700.ds-u-fill--primary-darkestocean-800Secondary Colors
.ds-u-fill--secondary-lightestspring-50.ds-u-fill--secondary-lighterspring-100.ds-u-fill--secondary-lightspring-300.ds-u-fill--secondaryspring-500.ds-u-fill--secondary-darkspring-600.ds-u-fill--secondary-darkerspring-700.ds-u-fill--secondary-darkestspring-800Accent colors
Primary accent colors
.ds-u-fill--accent-primary-lightestpersimmon-50.ds-u-fill--accent-primary-lighterpersimmon-100.ds-u-fill--accent-primary-lightpersimmon-300.ds-u-fill--accent-primarypersimmon-500.ds-u-fill--accent-primary-darkpersimmon-600.ds-u-fill--accent-primary-darkerpersimmon-700.ds-u-fill--accent-primary-darkestpersimmon-800Neutral colors
.ds-u-fill--whitewhite-solid.ds-u-fill--gray-lightestgranite-50.ds-u-fill--gray-lightergranite-100.ds-u-fill--gray-lightgranite-300.ds-u-fill--graygranite-500.ds-u-fill--gray-darkgranite-700.ds-u-fill--basegranite-900.ds-u-fill--blackblack-solidBackground Colors
.ds-u-fill--backgroundwhite-solid.ds-u-fill--background-inverseocean-800Status colors
Informational
.ds-u-fill--info-lightestsky-50.ds-u-fill--info-lightersky-100.ds-u-fill--info-lightsky-300.ds-u-fill--infosky-500.ds-u-fill--info-darksky-600.ds-u-fill--info-darkersky-700.ds-u-fill--info-darkestsky-800Success
.ds-u-fill--success-lightestspring-50.ds-u-fill--success-lighterspring-100.ds-u-fill--success-lightspring-300.ds-u-fill--successspring-500.ds-u-fill--success-darkspring-600.ds-u-fill--success-darkerspring-700.ds-u-fill--success-darkestspring-800Warn
.ds-u-fill--warn-lightestgoldenrod-50.ds-u-fill--warn-lightergoldenrod-100.ds-u-fill--warn-lightgoldenrod-300.ds-u-fill--warngoldenrod-500.ds-u-fill--warn-darkgoldenrod-600.ds-u-fill--warn-darkergoldenrod-700.ds-u-fill--warn-darkestgoldenrod-800Error
.ds-u-fill--error-lightestrose-50.ds-u-fill--error-lighterrose-100.ds-u-fill--error-lightrose-300.ds-u-fill--errorrose-500.ds-u-fill--error-darkrose-600.ds-u-fill--error-darkerrose-700.ds-u-fill--error-darkestrose-800Focus Colors
.ds-u-fill--focus-lightwhite-solid.ds-u-fill--focus-darkorchid-500Additional Colors
.ds-u-fill--muted-inverselapis-50.ds-u-fill--transparenttransparent