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
Guage example		 NO YES (SUBSET) YES (SUBSET) YES (Small palettes only, use segments or base on condition)
Arch speedometer
Speedometer example		 NO YES (SUBSET) YES (SUBSET) YES (Small palettes only)
Area graph
Area graph, overlapping chart example		 YES YES YES YES
Bar chart
Bar chart example

 

 YES YES YES YES
Clustered bar chartClustered bar chart example YES YES YES NO
Clustered column chartClustered column chart example YES YES YES NO
Donut chartDonut chart example YES YES YES NO
Full dial gaugeFull-dial example YES (SUBSET) YES (SUBSET) YES (SUBSET) YES (Small palettes only; show color based on condition)
Line plotLine plot chart example YES YES YES YES (Small palettes only; show color based on condition)
Pie chartPie chart example YES YES YES YES
Progress meterProgress indicator example YES (SUBSET) NO NO YES (Small palettes only; show color based on condition)
Semi dial gaugeSemi-dial example YES (SUBSET) YES (SUBSET) YES (SUBSET) YES (Small palettes only; show color based on condition)
Semi gaugeSemi gauge example YES (SUBSET) YES (SUBSET) YES (SUBSET) YES (Small palettes only; show color based on condition)
Single value/Scaled-up numberScaled-up number (single value) chart example YES (SUBSET) YES (SUBSET) YES (SUBSET) YES (Small palettes only; show color based on condition)
Spline graphSpline graph chart example YES (SUBSET) YES (SUBSET) YES (SUBSET) YES (Small palettes only; show color based on condition)
Stacked area graphStacked area graph chart example YES YES (SUBSET) YES (SUBSET) YES
Stacked area graph, percentageStacked area graph, percentage example YES YES (SUBSET) YES (SUBSET) YES
Stacked bar chartStacked bar chart example YES YES (SUBSET) YES (SUBSET) YES
Stacked bar chart, percentageStacked bar chart, percentage example YES YES (SUBSET) YES (SUBSET) YES
Stacked column chartStacked column chart example YES YES (SUBSET) YES (SUBSET) YES
Stacked column chart, percentageStacked column chart, percentage example YES YES (SUBSET) YES (SUBSET) YES
Stepped function graphStepped function chart example YES YES (SUBSET) YES (SUBSET) NO
Stepped line graphStepped line chart example YES NO NO NO

Last updated: Oct 2020