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.

Color

These official colors connect the login.gov brand across products — use them when possible.

The color codes listed beneath each name indicate what names can be used with the U.S. Web Design System’s color utility classes. For example:

This element has classes bg-primary-lighter and text-primary-dark.

Read more about the U.S. Web Design System’s color utility classes.

#112e51
Darker Blue / Navy
primary-darker
#0071bb
Blue
primary
#ebf3fa
Lighter Blue
primary-lighter
#e21c3d
Red
secondary

Extended palette

Primary

#f2f9ff
Lightest Blue
primary-lightest
#ebf3fa
Lighter Blue
primary-lighter
#cedced
Light Blue
primary-light
#0071bb
Blue
primary
#205493
Dark Blue
primary-dark
#112e51
Darker Blue / Navy
primary-darker
#0c213a
Darkest Blue
primary-darkest

Secondary

#fff0f3
Lightest Red
secondary-lightest
#f3b8be
Lighter Red
secondary-lighter
#ea7b85
Light Red
secondary-light
#e21c3d
Red
secondary
#ab142f
Dark Red
secondary-dark
#8b0a21
Darker Red
secondary-darker
#680617
Darkest Red
secondary-darkest

Base

#f0f0f0
Lightest Grey
base-lightest
#dedede
Lighter Grey
base-lighter
#adadad
Light Grey
base-light
#767676
Grey
base
#5c5c5c
Dark Grey
base-dark
#454545
Darker Grey
base-darker
#1b1b1b
Darkest Grey
base-darkest
#454545
Ink Grey
ink

Accent cool

#ecfcff
Lightest Teal
accent-cool-lightest
#b7dde9
Lighter Teal
accent-cool-lighter
#7bbfd6
Light Teal
accent-cool-light
#00a2c4
Teal
accent-cool
#008099
Dark Teal
accent-cool-dark
#007187
Darker Teal
accent-cool-darker
#006175
Darkest Teal
accent-cool-darkest

State palette

The state color palette is divided into five high-level role-based color families: info, error, warning, success, and disabled.

Info

#ecfcff
Lighter Info Teal
info-lighter
#b7dde9
Light Info Teal
info-light
#00a2c4
Info Teal
info
#007187
Dark Info Teal
info-dark
#006175
Darker Info Teal
info-darker

Error

#fff0f3
Lighter Error Red
error-lighter
#f3b8be
Light Error Red
error-light
#e21c3d
Error Red
error
#8b0a21
Dark Error Red
error-dark
#680617
Darker Error Red
error-darker

Warning

#fffdd7
Lighter Warning Yellow
warning-lighter
#fcf197
Light Warning Yellow
warning-light
#f5d600
Warning Yellow
warning
#847122
Dark Warning Yellow
warning-dark
#504332
Darker Warning Yellow
warning-darker

Success

#ebfcef
Lighter Success Green
success-lighter
#a6d5af
Light Success Green
success-light
#18852e
Success Green
success
#0e581e
Dark Success Green
success-dark
#094316
Darker Success Green
success-darker

Disabled

#f0f0f0
Light Disabled Grey
disabled-light
#767676
Disabled Grey
disabled
#454545
Dark Disabled Grey
disabled-dark