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 UI and Art
Use for text, backgrounds, forms, navigation, dividers, etc.
Use for interactive elements like buttons, links, etc. They can also be referenced for art in order to match other page elements.
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.
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."
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).