Skip to main content
U.S. Flag

An official website of the United States government

Background Color

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-lightundefined
.ds-u-fill--focus-color-darkundefined

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-colorundefined
.ds-u-fill--focus-color-inverseundefined
.ds-u-fill--focus-border-inverse#7c6210