Use the background color utility to change the default background color of an element.
Format: .ds-u-fill--[COLOR NAME]-[SHADE]
Primary Colors
.ds-u-fill--primary#0071bc.ds-u-fill--primary-darker#004f84.ds-u-fill--primary-darkest#00395e.ds-u-fill--black#000000.ds-u-fill--base#262626.ds-u-fill--gray-dark#404040.ds-u-fill--gray-light#a6a6a6.ds-u-fill--white#ffffffSecondary Colors
.ds-u-fill--secondary#02bfe7.ds-u-fill--secondary-dark#02acd0.ds-u-fill--secondary-darker#0186a2.ds-u-fill--secondary-darkest#016074.ds-u-fill--secondary-light#4ed2ee.ds-u-fill--secondary-lighter#b3ecf8.ds-u-fill--secondary-lightest#e6f9fdBackground Colors
.ds-u-fill--background#ffffff.ds-u-fill--background-inverse#00395e.ds-u-fill--gray-dark#404040.ds-u-fill--gray#5a5a5a.ds-u-fill--gray-light#a6a6a6.ds-u-fill--gray-lighter#d9d9d9.ds-u-fill--gray-lightest#f2f2f2Status Colors
.ds-u-fill--success#12890e.ds-u-fill--success-dark#107b0d.ds-u-fill--success-darker#0d600a.ds-u-fill--success-darkest#094507.ds-u-fill--success-light#2a9526.ds-u-fill--success-lighter#89c487.ds-u-fill--success-lightest#e7f3e7.ds-u-fill--warn#f8c41f.ds-u-fill--warn-dark#dfb01c.ds-u-fill--warn-darker#ae8916.ds-u-fill--warn-darkest#7c6210.ds-u-fill--warn-light#f9ca35.ds-u-fill--warn-lighter#fce28f.ds-u-fill--warn-lightest#fef9e9.ds-u-fill--error#e31c3d.ds-u-fill--error-dark#cc1937.ds-u-fill--error-darker#9f142b.ds-u-fill--error-darkest#720e1f.ds-u-fill--error-light#f18e9e.ds-u-fill--error-lightest#fce8ecFocus Colors
.ds-u-fill--focus-color-lightundefined.ds-u-fill--focus-color-darkundefinedAdditional Colors
.ds-u-fill--muted-inverse#e9ecf1.ds-u-fill--transparent#ffffff00Focus Colors - Deprecated
Alert:
Deprecated
Do not use.
.ds-u-fill--focus-colorundefined.ds-u-fill--focus-color-inverseundefined.ds-u-fill--focus-border-inverse#7c6210