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
#ffffff
Secondary 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
#e6f9fd
Background 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
#f2f2f2
Status 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
#fce8ec
Focus Colors
.ds-u-fill--focus-color-light
undefined
.ds-u-fill--focus-color-dark
undefined
Additional Colors
.ds-u-fill--muted-inverse
#e9ecf1
.ds-u-fill--transparent
#ffffff00
Focus Colors - Deprecated
Alert:
Deprecated
Do not use.
.ds-u-fill--focus-color
undefined
.ds-u-fill--focus-color-inverse
undefined
.ds-u-fill--focus-border-inverse
#7c6210