Color overview
Introduction to color in data visualization
Color is one of the ways to transmit data and information. In data visualization, color serves a function. It is not an opportunity for aesthetic, artistic or brand expression.
Use color encoding in data visualizations to:- Get users’ attention
- Impart additional meaning to data visualizations
- Improve users’ understanding and retention of information
- Alert users of a predetermined condition or event
- Emphasize key elements on a chart
- Differentiate among various data elements
- Help users to quickly identify particular values
- Show changes in a data set
Last updated: Oct 2020
Pega color palettes
Pega provides several out-of-the-box color palettes that satisfy many use cases when encoding data; they also address the accessibility needs of users with color blindness. The emphasis is on divergent color palettes, which often pose problems for users with red-green color blindness (protanopia and deuteranopia).
Most color palettes can be used across visualization methods; however, some palettes are not suitable for certain visualization methods. The matrix below offers an overview of how suitable a certain visualization method may be with a color encoding method.
“No” indicates that the palette is not suitable for the visualization method. A green “yes”, indicates suitability and a yellow “yes” indicates partial suitability. For some palettes, you can use a subset of the full palette as you see fit. “Condition” indicates that the usage of color depends on a condition.
Categorical colors | Sequential / continuous colors (dark to light) | Sequential / continuous colors (color to color) | Divergent colors | |
---|---|---|---|---|
Use to distinguish different categories | Use sequential palettes for temperature-like data (e.g. cool or warm) | Use to show opposing attributes (e.g. good vs. bad) | ||
Arch gauge |
NO | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only, use segments or base on condition) |
Arch speedometer |
NO | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only) |
Area graph |
YES | YES | YES | YES |
Bar chart
|
YES | YES | YES | YES |
Clustered bar chart |
YES | YES | YES | NO |
Clustered column chart |
YES | YES | YES | NO |
Donut chart |
YES | YES | YES | NO |
Full dial gauge |
YES (SUBSET) | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only; show color based on condition) |
Line plot |
YES | YES | YES | YES (Small palettes only; show color based on condition) |
Pie chart |
YES | YES | YES | YES |
Progress meter |
YES (SUBSET) | NO | NO | YES (Small palettes only; show color based on condition) |
Semi dial gauge |
YES (SUBSET) | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only; show color based on condition) |
Semi gauge |
YES (SUBSET) | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only; show color based on condition) |
Single value/Scaled-up number |
YES (SUBSET) | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only; show color based on condition) |
Spline graph |
YES (SUBSET) | YES (SUBSET) | YES (SUBSET) | YES (Small palettes only; show color based on condition) |
Stacked area graph |
YES | YES (SUBSET) | YES (SUBSET) | YES |
Stacked area graph, percentage |
YES | YES (SUBSET) | YES (SUBSET) | YES |
Stacked bar chart |
YES | YES (SUBSET) | YES (SUBSET) | YES |
Stacked bar chart, percentage |
YES | YES (SUBSET) | YES (SUBSET) | YES |
Stacked column chart |
YES | YES (SUBSET) | YES (SUBSET) | YES |
Stacked column chart, percentage |
YES | YES (SUBSET) | YES (SUBSET) | YES |
Stepped function graph |
YES | YES (SUBSET) | YES (SUBSET) | NO |
Stepped line graph |
YES | NO | NO | NO |
Last updated: Oct 2020