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.

Utilities

Color

Change the color of text and SVGs (using fill: currentColor).

Note: Not all of these colors are placed in accessible color combinations.

Color

  • Responsive

CSS property: color

Base colors

.vads-u-color--base
$color-base
#212121
.vads-u-color--white
$color-white
#ffffff
.vads-u-color--black
$color-black
#000000
.vads-u-color--orange
$color-orange
#eb7f29
.vads-u-color--link-default
$color-link-default
#004795
.vads-u-color--warning-message
$color-warning-message
#fac922
.vads-u-color--gibill-accent
$color-gibill-accent
#fff1d2
.vads-u-color--primary
$color-primary
#0071bb
.vads-u-color--primary-darker
$color-primary-darker
#003e73
.vads-u-color--primary-darkest
$color-primary-darkest
#112e51
.vads-u-color--primary-alt
$color-primary-alt
#02bfe7
.vads-u-color--primary-alt-dark
$color-primary-alt-dark
#00a6d2
.vads-u-color--primary-alt-darkest
$color-primary-alt-darkest
#046b99
.vads-u-color--primary-alt-light
$color-primary-alt-light
#9bdaf1
.vads-u-color--primary-alt-lightest
$color-primary-alt-lightest
#e1f3f8
.vads-u-color--secondary
$color-secondary
#e31c3d
.vads-u-color--secondary-dark
$color-secondary-dark
#cd2026
.vads-u-color--secondary-darkest
$color-secondary-darkest
#981b1e
.vads-u-color--secondary-light
$color-secondary-light
#e59393
.vads-u-color--secondary-lightest
$color-secondary-lightest
#f9dede

Grayscale

.vads-u-color--gray
$color-gray
#5b616b
.vads-u-color--gray-dark
$color-gray-dark
#323a45
.vads-u-color--gray-medium
$color-gray-medium
#757575
.vads-u-color--gray-light
$color-gray-light
#aeb0b5
.vads-u-color--gray-light-alt
$color-gray-light-alt
#eeeeee
.vads-u-color--gray-lighter
$color-gray-lighter
#d6d7d9
.vads-u-color--gray-lightest
$color-gray-lightest
#f1f1f1
.vads-u-color--gray-warm-dark
$color-gray-warm-dark
#494440
.vads-u-color--gray-warm-light
$color-gray-warm-light
#e4e2e0
.vads-u-color--gray-cool-light
$color-gray-cool-light
#dce4ef

Tertiary colors

.vads-u-color--gold
$color-gold
#fdb81e
.vads-u-color--gold-darker
$color-gold-darker
#988530
.vads-u-color--gold-light
$color-gold-light
#f9c642
.vads-u-color--gold-lighter
$color-gold-lighter
#fad980
.vads-u-color--gold-lightest
$color-gold-lightest
#fff1d2
.vads-u-color--green
$color-green
#2e8540
.vads-u-color--green-darker
$color-green-darker
#195c27
.vads-u-color--green-light
$color-green-light
#4aa564
.vads-u-color--green-lighter
$color-green-lighter
#94bfa2
.vads-u-color--green-lightest
$color-green-lightest
#e7f4e4
.vads-u-color--cool-blue
$color-cool-blue
#205493
.vads-u-color--cool-blue-light
$color-cool-blue-light
#4773aa
.vads-u-color--cool-blue-lighter
$color-cool-blue-lighter
#8ba6ca
.vads-u-color--cool-blue-lightest
$color-cool-blue-lightest
#dce4ef

Hub colors

.vads-u-color--hub-health-care
$color-hub-health-care
#3f57a6
.vads-u-color--hub-education
$color-hub-education
#21827f
.vads-u-color--hub-disability
$color-hub-disability
#a23737
.vads-u-color--hub-careers
$color-hub-careers
#bd5727
.vads-u-color--hub-pension
$color-hub-pension
#3e8520
.vads-u-color--hub-housing
$color-hub-housing
#8e704f
.vads-u-color--hub-life-insurance
$color-hub-life-insurance
#6f7a41
.vads-u-color--hub-burials
$color-hub-burials
#357ab2
.vads-u-color--hub-family-member
$color-hub-family-member
#003e73
.vads-u-color--hub-service-member
$color-hub-service-member
#003e73