Colors

A flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.

Palette

This palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas "pop" on the page.

Primary colors

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

#0071bc

$color-primary

#205493

$color-primary-darker

#112e51

$color-primary-darkest

#212121

$color-base

#323a45

$color-gray-dark

#aeb0b5

$color-gray-light

#ffffff

$color-white

Secondary colors

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

#02bfe7

$color-primary-alt

#046b99

$color-primary-alt-darkest

#00a6d2

$color-primary-alt-dark

#9bdaf1

$color-primary-alt-light

#e1f3f8

$color-primary-alt-lightest

#e31c3d

$color-secondary

#981b1e

$color-secondary-darkest

#cd2026

$color-secondary-dark

#e59393

$color-secondary-light

#f9dede

$color-secondary-lightest

Background colors

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

#323a45

$color-gray-dark

#5b616b

$color-gray

#aeb0b5

$color-gray-light

#d6d7d9

$color-gray-lighter

#f1f1f1

$color-gray-lightest

#494440

$color-gray-warm-dark

#e4e2e0

$color-gray-warm-light

#112e51

$color-primary-darkest

#dce4ef

$color-gray-cool-light

Tertiary colors

These colors are used primarily for content-specific needs, such as alerts and illustrations. They should never overpower the primary colors.

#fdb81e

$color-gold

#f9c642

$color-gold-light

#fad980

$color-gold-lighter

#fff1d2

$color-gold-lightest

#2e8540

$color-green

#4aa564

$color-green-light

#94bfa2

$color-green-lighter

#e7f4e4

$color-green-lightest

#205493

$color-cool-blue

#4773aa

$color-cool-blue-light

#8ba6ca

$color-cool-blue-lighter

#dce4ef

$color-cool-blue-lightest

Special state colors

#aeb0b5

$color-focus

#4c2c92

$color-visited

Text accessibility

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.

If you choose to customize beyond this palette, this color contrast tool is a useful resource for testing the compliance of any color combination.

Fully accessible combinations

Colors on a white background

primary-darkest on white

primary-darker on white

primary on white

cool-blue-light on white

primary-alt-darkest on white

green on white

visited on white

base on white

gray-dark on white

gray on white

gray-warm-dark on white

secondary-darkest on white

secondary-dark on white

secondary on white

Neutrals on a colored background

white on base

white on gray-warm-dark

white on gray-dark

white on gray

white on primary-darkest

white on primary-darker

white on primary

white on cool-blue-light

white on primary-alt-darkest

base on primary-alt-dark

base on primary-alt

white on green

base on green-light

base on gold

base on gold-light

white on secondary-darkest

white on secondary-dark

white on secondary

base on gray-light

base on gray-lighter

base on gray-warm-light

base on cool-blue-lighter

base on cool-blue-lightest

base on primary-alt-lightest

base on green-lighter

base on green-lightest

base on gold-lighter

base on gold-lightest

base on secondary-lightest

Become part of the community

The U.S. Web Design System has grown into a blossoming, open source community of government engineers, content specialists, and designers. We currently support dozens of agencies and more than 100 sites, which is fueled through an active community of contributors both in and out of government.