Data visualization color palette
The data visualization color palette is used to represent discrete categories of data. This palette utilizes the Gestalt color palette and is optimized for accessibility in data visualizations. The palette is comprised of a 12-color categorical palette, along with a few semantic colors. It can be implemented through our design tokens.
12-Color categorical palette
This palette helps create a consistent brand image among visualizations across Pinterest products, while ensuring enough color contrast against background and between individual colors. There are 12 colors in the palette, divided into a main palette and an extended palette.
- The colors in the main palette are used in most cases.
- Use the extended palette only when more than 6 colors are needed.
- When there is only 1 color needed in a visualization, always use Data Visualization #05, which is reserved for showing total value.
- When more than 1 color is needed, colors should be applied in the exact order in the palette to maximize contrast between adjacent colors, in order to help with visual differentiation.
Light mode
Dark mode
Semantic colors
Semantic colors are used to indicate trends in performance data. For successful trends, we use a slightly darker green color for text or icons associated with data to ensure the text has enough contrast.