Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Foundation

Background color

Change the background color of an element

Background color

  • Responsive

CSS property: background-color

Base colors

.vads-u-background-color--base
$color-base
.vads-u-background-color--white
$color-white
.vads-u-background-color--black
$color-black
.vads-u-background-color--orange
$color-orange
.vads-u-background-color--link-default
$color-link-default
.vads-u-background-color--warning-message
$color-warning-message
.vads-u-background-color--gibill-accent
$color-gibill-accent
.vads-u-background-color--primary
$color-primary
.vads-u-background-color--primary-dark
$color-primary-dark
.vads-u-background-color--primary-darker
$color-primary-darker
.vads-u-background-color--primary-alt
$color-primary-alt
.vads-u-background-color--primary-alt-dark
$color-primary-alt-dark
.vads-u-background-color--primary-alt-darkest
$color-primary-alt-darkest
.vads-u-background-color--primary-alt-light
$color-primary-alt-light
.vads-u-background-color--primary-alt-lightest
$color-primary-alt-lightest
.vads-u-background-color--secondary
$color-secondary
.vads-u-background-color--secondary-dark
$color-secondary-dark
.vads-u-background-color--secondary-darkest
$color-secondary-darkest
.vads-u-background-color--secondary-light
$color-secondary-light
.vads-u-background-color--secondary-lightest
$color-secondary-lightest

Grayscale

.vads-u-background-color--gray
$color-gray
.vads-u-background-color--gray-dark
$color-gray-dark
.vads-u-background-color--gray-medium
$color-gray-medium
.vads-u-background-color--gray-light
$color-gray-light
.vads-u-background-color--gray-light-alt
$color-gray-light-alt
.vads-u-background-color--gray-lighter
$color-gray-lighter
.vads-u-background-color--gray-lightest
$color-gray-lightest
.vads-u-background-color--gray-warm-dark
$color-gray-warm-dark
.vads-u-background-color--gray-warm-light
$color-gray-warm-light
.vads-u-background-color--gray-cool-light
$color-gray-cool-light

Tertiary colors

.vads-u-background-color--gold
$color-gold
.vads-u-background-color--gold-darker
$color-gold-darker
.vads-u-background-color--gold-light
$color-gold-light
.vads-u-background-color--gold-lighter
$color-gold-lighter
.vads-u-background-color--gold-lightest
$color-gold-lightest
.vads-u-background-color--green
$color-green
.vads-u-background-color--green-darker
$color-green-darker
.vads-u-background-color--green-light
$color-green-light
.vads-u-background-color--green-lighter
$color-green-lighter
.vads-u-background-color--green-lightest
$color-green-lightest
.vads-u-background-color--cool-blue
$color-cool-blue
.vads-u-background-color--cool-blue-light
$color-cool-blue-light
.vads-u-background-color--cool-blue-lighter
$color-cool-blue-lighter
.vads-u-background-color--cool-blue-lightest
$color-cool-blue-lightest

Hub colors

.vads-u-background-color--hub-health-care
$color-hub-health-care
.vads-u-background-color--hub-education
$color-hub-education
.vads-u-background-color--hub-disability
$color-hub-disability
.vads-u-background-color--hub-careers
$color-hub-careers
.vads-u-background-color--hub-pension
$color-hub-pension
.vads-u-background-color--hub-housing
$color-hub-housing
.vads-u-background-color--hub-life-insurance
$color-hub-life-insurance
.vads-u-background-color--hub-burials
$color-hub-burials
.vads-u-background-color--hub-family-member
$color-hub-family-member
.vads-u-background-color--hub-service-member
$color-hub-service-member
Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2024