• Text Resize A A A
  • Print Print
  • Share Share on facebook Share on twitter Share

Color Palette

HHS.gov uses a simple, minimalist color palette to aid in visually communicating the brand and message as trustworthy. The color palette consists of primary colors, secondary colors, background colors, and special state colors. All the colors meet or exceed Section 508 color contrast requirements.


Primary Colors

HHS.gov uses shades of blue and light gray for the primary color palette. Color theory identifies blue as a color that symbolizes trust, confidence, sincerity and responsibility.

 

#185394

 

#d1edfc

 

#edf8ff

 

#f6f7f7

 

Deep Blues

Deep blues are strong, reliable, credible, authoritative, confident, and classic.

Bright Blues

Bright, medium blues are youthful, energizing, vibrant, and refreshing.

Light Blues

Light blues are trusting, understanding, reassuring, friendly, calming, patient, and peaceful. They also feel cool and clean.

Light Grays

Light grays are classic, basic, and neutral. They are practical, fundamental, and modest.

Primary Navigation Tile Colors

The primary tile color palettes are used to identify the main content areas of the site. The bold colors below are paired with their corresponding hover state colors. All the colors in this palette meet or exceed Section 508 color contrast requirements.

HHS Enterprise Primary Navigation Colors

These colors are unique to the HHS Enterprise primary site navigation.

   

#185394
primary

#214872
hover

   

#c94747
primary

#b24444
hover

 
   

#19826e
primary

#1d7665
hover

   

#77508e
primary

#644b74
hover

 

HHS Independent Template Primary Navigation Colors

These colors are available to use for the primary navigation for HHS sites on the Independent Template.

   

#383d6b
primary

#2e335c
hover

   

#127ab5
primary

#176ea3
hover

 
   

#317687
primary

#25606e
hover

   

#64770b
primary

#586b2d
hover

 
   

#84745b
primary

#6e614b
hover

   

#932923
primary

#7d201a
hover

 
   

#c84d11
primary

#ac441f
hover

   

#a16519
primary

#8e5a21
hover

 
   

#a34869
primary

#943f5e
hover

   

#716377
primary

#65596b
hover

 

Secondary Colors

HHS.gov uses yellows for the accent color palette. The accent colors are used to highlight important information, such as buttons or alert notifications. These colors are used sparingly, highlighting one piece of information at a time.

 

#fbae17

 

#fbbb3d

 

#f7d480

 
 

Golden Yellows

Golden yellows are comforting, optimistic, hospitable, nourishing, and valuable.

Bright Yellows

Bright yellows are energetic, friendly, illuminating, innovative, stimulating, and joyful. They also represent awareness and caution.

Light Yellows

Light yellows are cheery, easy, pleasing, and warming.


Background Colors

 

#000000

 

#333332

 

#b3b3b3

 

#e9eaeb

 

#ffffff

Background colors are neutral and serve as the framework in design. White is used as the background color for the main content areas. A white background provides a high contrast backdrop for the black text. Light gray provides a neutral backdrop for content tiles and local navigation. Black is used for body copy on the page, providing a high-contrast for crisp, legible text.

Black

Black is classic, powerful, strong, modern, elegant, sophisticated, and stylish.

Dark Grays

Dark grays are secure, reliable, responsible, solid, classy, and intelligent.

Light Grays

Light grays are classic, basic, timeless, and neutral. They are practical, fundamental, and modest.

White

White is easy, clean, fresh, pure, and good.


Special State Colors

 

#0053CC
unvisited

 

#6F57B5
visited

 
 
 

Usability findings show that special state colors help users to more easily identify visited and unvisited text links.

The unvisited text link color of blue is used throughout the site to identify text links. Once a link has been selected and visited, the link color changes from blue to purple. These special state colors help people identify links they have and have not visited, as well as differentiates the text links from other content on the site. To avoid confusion and usability issues, these colors should only be used for text links.

Additionally, to support WCAG 2.0 use of color requirements, these special state text link colors also have a 3:1 ratio when measured against the surrounding text.

Content created by Digital Communications Division (DCD)
Content last reviewed on July 13, 2016