The .gov means it’s official.
Federal government websites always use a .gov or .mil domain. Before sharing sensitive information online, make sure you’re on a .gov or .mil site by inspecting your browser’s address (or “location”) bar.

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.

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

Guidance

Requirements

Always

Use 508-compliant color schemes in your data visualizations.

Use a neutral background.

Recommendations

Recommended

Refer to your agency’s brand guidelines to determine what colors to use.

Be consistent in how you use color to label data across data visualiations.