Components

Colors

The colors featured in this section adhere to U.S. Census Bureau’s brand guidelines and can be easily customized to fit your needs.

Palette

This palette is designed to delight users with a mix of warm and cool tones that are as unique as they are vibrant. The simple and minimalistic nature of this palette will ensure users can differentiate categories and sequencing of data more easily.

We encourage everyone using these standards to reference their own Agency’s brand guidelines and to reference the Text Accessibility section below for guidance on using 508-compliant colors.

Featured Colors

This palette’s featured colors are teal, navy, orange, and grey.

Teal

RGB (0, 149, 168)

CMYK (81, 24, 31, 0)

HEX #0095A8

$census-color-teal

Navy

RGB (17, 46, 81)

CMYK (79, 43, 0, 68)

HEX #112E51

$census-color-navy

Orange

RGB (255, 112, 67)

CMYK (0, 56, 74, 0)

HEX #FF7043

$census-color-orange

Grey

RGB (120, 144, 156)

CMYK (23, 8, 0, 39)

HEX #78909C

$census-color-grey

Sequential Colors

Each of the four primary colors can be used to create a data visualization with a sequential color palette. This type of palette can be used when data values can be ordered from low to high. To reflect that the data is sequential (also known as continuous), all of the data values should be variations of the same color hue, where lower values are lighter and higher values are darker.

Sequential colors are most commonly used to render a single category of data, such as a bar chart, or when visualizing a complex set of data with many categories.

Teal Palette

Darkest Teal

RGB (0, 40, 46)

CMYK (100, 13, 0, 82)

HEX #00282E

$census-color-teal-darkest

Darker Teal

RGB (0, 72, 81)

CMYK (100, 11, 0, 68)

HEX #004851

$census-color-teal-darker

Dark Teal

RGB (0, 108, 122)

CMYK (100, 11, 0, 52)

HEX #006C7A

$census-color-teal-dark

Teal

RGB (0, 149, 168)

CMYK (100, 11, 0, 34)

HEX #26C6DA

$census-color-teal

Light Teal

RGB (0, 190, 214)

CMYK (100, 11, 0, 16)

HEX #00BED6

$census-color-teal-light

Lighter Teal

RGB (99, 225, 234)

CMYK (58, 4, 0, 8)

HEX #6BEFF9

$census-color-teal-lighter

Lightest Teal

RGB (168, 245, 255)

CMYK (34, 4, 0, 0)

HEX #D4F4F8

$census-color-teal-lightest

Blue Palette

Darkest Blue

RGB (8, 22, 39)

CMYK (79, 44, 0, 85)

HEX #081627

$census-color-blue-darkest

Navy

RGB (17, 46, 81)

CMYK (79, 43, 0, 68)

HEX #112E51

$census-color-navy

Dark Blue

RGB (32, 84, 147)

CMYK (78, 43, 0, 42)

HEX #205493

$census-color-blue-dark

Blue

RGB (46, 120, 210)

CMYK (78, 43, 0, 18)

HEX #2E78D2

$census-color-blue

Light Blue

RGB (109, 161, 224)

CMYK (51, 28, 0, 12)

HEX #6DA1E0

$census-color-blue-light

Lighter Blue

RGB (151, 188, 233)

CMYK (35, 19, 0, 9)

HEX #97BCE9

$census-color-blue-lighter

Lightest Blue

RGB (193, 215, 242)

CMYK (20, 11, 0, 5)

HEX #C1D7F2

$census-color-blue-lightest

Orange Palette

Darkest Orange

RGB (93, 40, 24)

CMYK (0, 57, 74, 64)

HEX #5D2818

$census-color-orange-darkest

Darker Orange

RGB (133, 58, 34)

CMYK (0, 56, 74, 48)

HEX #853A22

$census-color-orange-darker

Dark Orange

RGB (194, 84, 50)

CMYK (0, 57, 74, 24)

HEX #C25432

$census-color-orange-dark

Orange

RGB (255, 112, 67)

CMYK (0, 56, 74, 0)

HEX #FF7043

$census-color-orange

Light Orange

RGB (255, 151, 118)

CMYK (0, 41, 54, 0)

HEX #FF9776

$census-color-orange-light

Lighter Orange

RGB (255, 190, 169)

CMYK (0, 25, 34, 0)

HEX #FFBEA9

$census-color-orange-lighter

Lightest Orange

RGB (255, 228, 220)

CMYK (0, 11, 14, 0)

HEX #FFE4DC

$census-color-orange-lightest

Grey Palette

Darkest Grey

RGB (34, 44, 49)

CMYK (31, 10, 0, 81)

HEX #222C31

$census-color-grey-darkest

Darker Grey

RGB (54, 72, 80)

CMYK (32, 10, 0, 69)

HEX #364850

$census-color-grey-darker

Dark Grey

RGB (75, 99, 110)

CMYK (32, 10, 0, 57)

HEX #4B636E

$census-color-grey-dark

Grey

RGB (120, 144, 156)

CMYK (23, 8, 0, 39)

HEX #78909C

$census-color-grey

Light Grey

RGB (167, 192, 205)

CMYK (19, 6, 0, 20)

HEX #A7C0CD

$census-color-grey-light

Lighter Grey

RGB (200, 215, 223)

CMYK (10, 4, 0, 13)

HEX #C8D7DF

$census-color-grey-lighter

Lightest Grey

RGB (232, 239, 242)

CMYK (4, 1, 0, 5)

HEX #E8EFF2

$census-color-grey-lightest

Qualitative Colors

The four primary colors can also be used to create a qualitative color palette. Qualitative colors are used to render categorical data, such as gender or race, that has no inherent sequential order.

When using this type of palette, try using colors with just enough variance in their hue and brightness to ensure all of the categories are represented similarly.

Example Palette

Teal

RGB (0, 149, 168)

CMYK (100, 11, 0, 34)

HEX #26C6DA

$census-color-teal

Navy

RGB (17, 46, 81)

CMYK (79, 43, 0, 68)

HEX #112E51

$census-color-navy

Orange

RGB (255, 112, 67)

CMYK (0, 56, 74, 0)

HEX #FF7043

$census-color-orange

Grey

RGB (120, 144, 156)

CMYK (23, 8, 0, 39)

HEX #78909C

$census-color-grey

Blue

RGB (46, 120, 210)

CMYK (78, 43, 0, 18)

HEX #2E78D2

$census-color-blue

Dark Teal

RGB (0, 108, 122)

CMYK (100, 11, 0, 52)

HEX #006C7A

$census-color-teal-dark

Light Orange

RGB (255, 151, 118)

CMYK (0, 41, 54, 0)

HEX #FFBEA9

$census-color-orange-lighter

Alternatively, a highlight color can be used with a qualitative palette to draw attention to a particular category of data. With this type of palette, a bias is shown towards the highlight color so use this type of palette with caution.

Example Palette with Highlight

Lighter Orange

RGB (255, 190, 169)

CMYK (0, 25, 34, 0)

HEX #FFBEA9

$census-color-orange-lighter

Lighter Blue

RGB (151, 188, 233)

CMYK (35, 19, 0, 9)

HEX #97BCE9

$census-color-blue-lighter

Orange

RGB (255, 112, 67)

CMYK (0, 56, 74, 0)

HEX #26C6DA

$census-color-orange

Lighter Grey

RGB (200, 215, 223)

CMYK (10, 4, 0, 13)

HEX #97BCE9

$census-color-grey-lighter

Lightest Teal

RGB (168, 245, 255)

CMYK (34, 4, 0, 0)

HEX #D4F4F8

$census-color-teal-lightest

Diverging Colors

Like sequential colors, diverging colors are commonly used to render a single category of data when data values can be ordered from low to high. The key difference however is that diverging colors bring attention to a significant break point in the data. To illustrate this, a different color is used on each end of the value scale and the breakpoint, or middle value, is represented as a neutral color. Data values that are furthest from the break point are shaded darker, while values that are closer are shaded lighter.

Example Palette

Navy

RGB (17, 46, 81)

CMYK (79, 43, 0, 68)

HEX #112E51

$census-color-navy

Lighter Blue

RGB (151, 188, 233)

CMYK (35, 19, 0, 9)

HEX #97BCE9

$census-color-blue-lighter

Lightest Grey

RGB (232, 239, 242)

CMYK (4, 1, 0, 5)

HEX #C1D7F2

$census-color-grey-lightest

Lighter Orange

RGB (255, 190, 169)

CMYK (0, 25, 34, 0)

HEX #FFBEA9

$census-color-orange-lighter

Darker Orange

RGB (133, 58, 34)

CMYK (0, 56, 74, 48)

HEX #853A22

$census-color-orange-darker

No Data Colors

Occasionally, it is necessary to color in elements of a data visualization where no data exists, such as in maps. In these cases, a neutral color should be used to represent a “No Data” class. This class should be added to the visualization’s corresponding legend.

Color Accessibility

The WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone. 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.

Best Practices

In general, any steps taken to improve the color accessibility of a data visualization improves the user experience for everyone. Below are a list of recommendations for how to make data visualizations more user-friendly:

  • Use text elements to label data directly to rely less on color.
  • Use tools such as color brewer to select a palette that is 508-compliant.
  • When using sequential and diverging colors, adjust your color palette to ensure there is enough contrast between colors.
  • When using a qualitative color palette where contrasting is not encouraged, try to avoid conflicting color combinations. Some examples include:
    • red & green
    • green & brown
    • green & blue
    • blue & grey
    • blue & purple
    • green & grey
    • green & black

Text Accessibility

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.

Accessible Text Combinations

Colors on White Background
Teal Examples
  • census-color-teal-darkest on white
  • census-color-teal-darker on white
  • census-color-teal-dark on white
Blue Examples
  • census-color-blue-darkest on white
  • census-color-blue-darker on white
  • census-color-blue-dark on white
Orange Examples
  • census-color-orange-darkest on white
  • census-color-orange-darker on white
  • census-color-orange-dark on white
Grey Examples
  • census-color-grey-darkest on white
  • census-color-grey-darker on white
  • census-color-grey-dark on white
Neutrals on a Colored Background
Teal Examples
  • white on census-color-teal-darkest
  • white on census-color-teal-darker
  • white on census-color-teal-dark
Blue Examples
  • white on census-color-blue-darkest
  • white on census-color-blue-darker
  • white on census-color-blue-dark
Orange Examples
  • white on census-color-orange-darkest
  • white on census-color-orange-darker
  • white on census-color-orange-dark
Grey Examples
  • white on census-color-grey-darkest
  • white on census-color-grey-darker
  • white on census-color-grey-dark