Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

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