Colors

We use a coordinated set of colors to help maintain a consistent presentation and brand. This includes a set of neutral colors for backgrounds and text, and a full set of accent colors for creating visual interest and highlighting important design elements.

Each color value below is accompanied by its corresponding name in our design system (ex., “ProPublica Blue”) along with its hex value (#304154) and CSS custom property in our core stylesheets (var(--pp-blue)). You can tap any color square below to copy its hex value to your clipboard.

To import these colors into other tools:

Figma: Pull in the Colors Library from the Design System
Adobe Creative Suite: Download the ASE swatch files
CSS: Get them as CSS and SASS files

For Brand

ProPublica Dark Blue #304154 var(--pp-blue)

ProPublica Accent Blue #06aee0 var(--blue-50)

Donate Red #da352b var(--red-50)

For UI and Art

Neutral Colors

Use for text, backgrounds, forms, navigation, dividers, etc.

Gray 10 #e2e2e2 var(--gray-10)

Gray 20 #c6c6c6 var(--gray-20)

Gray 30 #ababab var(--gray-30)

Gray 40 #919191 var(--gray-40)

Gray 50 #777777 var(--gray-50)

Gray 60 #5e5e5e var(--gray-60)

Gray 70 #474747 var(--gray-70)

Gray 80 #303030 var(--gray-80)

Gray 90 #1b1b1b var(--gray-90)

Cool 10 #dee3e6 var(--cool-10)

Cool 20 #bec8ce var(--cool-20)

Cool 30 #9eadb6 var(--cool-30)

Cool 40 #84939c var(--cool-40)

Cool 50 #6c7982 var(--cool-50)

Cool 60 #556068 var(--cool-60)

Cool 70 #40484f var(--cool-70)

Cool 80 #2b3137 var(--cool-80)

Cool 90 #1b2127 var(--cool-90)

Warm 10 #eeece7 var(--warm-10)

Warm 20 #cdc6b7 var(--warm-20)

Warm 30 #b1ab9c var(--warm-30)

Warm 40 #979082 var(--warm-40)

Warm 50 #7d7669 var(--warm-50)

Warm 60 #645e51 var(--warm-60)

Warm 70 #4c463a var(--warm-70)

Warm 80 #353025 var(--warm-80)

Warm 90 #201b10 var(--warm-90)

Accent Colors

Use for interactive elements like buttons, links, etc. They can also be referenced for art in order to match other page elements.

Red Light #f58d7a var(--red-30)

Red Mid #da352b var(--red-50)

Red Dark #9b0000 var(--red-70)

Orange Light #fcb475 var(--orange-30)

Orange Mid #e98406 var(--orange-50)

Orange Dark #984300 var(--orange-70)

Yellow Light #fada7f var(--yellow-30)

Yellow Mid #eac300 var(--yellow-50)

Yellow Dark #8a7000 var(--yellow-70)

Olive Light #d3e380 var(--olive-30)

Olive Mid #acd105 var(--olive-50)

Olive Dark #527d00 var(--olive-70)

Green Light #8bd694 var(--green-30)

Green Mid #14b84f var(--green-50)

Green Dark #007107 var(--green-70)

Aqua Light #8cdbc3 var(--aqua-30)

Aqua Mid #00c19c var(--aqua-50)

Aqua Dark #007556 var(--aqua-70)

Turquoise Light #90d8dd var(--turquoise-30)

Turquoise Mid #05bec7 var(--turquoise-50)

Turquoise Dark #00737c var(--turquoise-70)

Blue Light #92ceed var(--blue-30)

Blue Mid #06aee0 var(--blue-50)

Blue Dark #006997 var(--blue-70)

Cobalt Light #93a8ed var(--cobalt-30)

Cobalt Mid #2074df var(--cobalt-50)

Cobalt Dark #0045a7 var(--cobalt-70)

Purple Light #dda7fe var(--purple-30)

Purple Mid #bf6afb var(--purple-50)

Purple Dark #7a28b6 var(--purple-70)

Fuschia Light #e488d6 var(--fuschia-30)

Fuschia Mid #c91dba var(--fuschia-50)

Fuschia Dark #910086 var(--fuschia-70)

Pink Light #ea85a4 var(--pink-30)

Pink Mid #cf176d var(--pink-50)

Pink Dark #970042 var(--pink-70)

For Data Visualization

Color scales for charts, data visualizations, and other graphics. If you want a good guide to choosing which color scale might work best, read this whole series.

Sequential Color Scales

Use a sequential color scale for visualizing data that goes from low to high, like temperature, risk level, number of evictions, etc. Sequential color scales can be single or multi hue.

Red

#ffdad3

#fdb5a7

#f68f7d

#ea6855

#dc3a2f

#bd1017

#930000

#690000

#4c0000

Orange

#ffdcbf

#fdb87d

#f1963a

#da7700

#ba5e00

#9b4500

#7e2c00

#621100

#410000

Yellow

#fce095

#eac305

#cba800

#ad8e00

#8f7400

#735c00

#5a4400

#442c00

#351000

Olive

#dee99c

#b2d429

#93b900

#769e00

#598300

#3e6a00

#285000

#1e3700

#161f00

Green

#c8ecca

#8fd797

#4ac265

#00a740

#008a25

#006e04

#005300

#003a00

#002200

Aqua

#c1ebdd

#7ed7bc

#08c19c

#00a481

#008766

#006c4d

#005236

#003920

#002200

Turquoise

#c3eaec

#81d4d9

#03bec7

#00a0a9

#00848d

#006972

#004f58

#003640

#001f24

Blue

#cbe7f6

#93ceed

#49b7e4

#009ccd

#0080af

#006492

#004a76

#00325b

#001b3e

Cobalt

#dde1f9

#b9c5f3

#94a9ed

#688ee6

#2575df

#005bc1

#0040a1

#002780

#000d60

Purple

#f2daff

#e3b5fe

#d290fd

#be69fa

#a14fdd

#8534c1

#6915a5

#460085

#1d0061

Fuschia

#f8d9f2

#f0b4e5

#e58dd8

#d964ca

#cc2ebd

#ac009f

#83007a

#5c0058

#41003f

Pink

#fcdae2

#f5b5c7

#ed8fab

#e26891

#d53878

#ba005c

#90003c

#67001f

#490001

Blue-Yellow

#00568a

#1f6a94

#347e9d

#4893a5

#5da8ad

#76bdb3

#92d1b6

#b8e4b5

#ffeea2

Red-Yellow

#930000

#a33113

#b34e26

#c26939

#d0844d

#dd9e61

#e9b876

#f4d38c

#ffeea2

Purple-Blue

#460085

#592892

#6b459f

#7b60ac

#8b7ab9

#9a96c6

#a8b1d2

#b6cddf

#d3ebec

Viridis

#5c0058

#553a6e

#4a5e7e

#3b7f86

#249f87

#abdc5d

#c8e275

#e4e88b

#ffeea2

Diverging Color Scales

Use a diverging color scale for visualizing data that has two extremes and a middle, like positive/negative values, election results, or scales from "strongly disagree" to "strongly agree."

Red-Yellow-Blue

#930000

#b34e26

#d0844d

#e9b876

#ffeea2

#69cfd8

#229ca5

#006972

#003842

Purple-Yellow-Green

#460085

#7c4695

#aa7fa3

#d5b9af

#fff7ba

#91cf80

#5e9a50

#2d6825

#003900

Green-White-Orange

#164a40

#54977f

#8dc1a1

#c7e1ce

#ffffff

#ffce93

#ef9b5e

#b5461a

#702000

Political

#00345d

#216390

#4d94c4

#86c7f7

#f5f5f5

#fcb09e

#ef6855

#c12820

#7c0000

Categorical or Qualitative

Use a categorical color scale for visualizing data that is in discrete categories that have no particular order (countries, race/ethnicities, school districts).

Multi

#00568a

#d29d05

#a0442e

#85bbbe

#401f5a

#b5cead

#be7c8e