Data Visualization - Color Roles
The data visualization palette requires choosing design tokens based on the nature of the data. Accessibility considerations are also critical.
Last updated 7/17/2025
Color roles
When designing digital product UIs, chart elements and UI elements can coexist in the same area. Use the color tokens dedicated to data visualization for chart elements, and use the standard color tokens for UI elements.
UI elements
Use Dashboard Widget or UI colors (sd.system.color.component)
Chart elements
Use chart-specific color tokens
Chart background elements
Elements used for chart backgrounds
Using single vs. multi-hue colors
The data visualization color palette provides single-hue and multi-hue options. Choose according to your goal and the data you are working with. To coexist with Serendie Design System’s color themes and keep product screens simple, we generally recommend single-hue colors unless multi-hue is necessary to convey meaning.
When using single-hue colors
Use the same color when representing the same category, dimension, metric, or sequential numbers. For lightness, use consecutive numbers starting from 01 or 06 in the palette.
Whenever possible, represent items with a single lightness in the single-hue set—ideally chart.mark.primary.05 (see example 1).
When using multi-hue colors
Use different hues when representing different categories, dimensions, or metrics.
When combining multiple chart types that represent different values, use combinations across the color wheel. (See example 2 for combining multiple chart types.)
When combining multiple chart types
Use diagonal combinations from the color wheel below. Example: In the stacked chart above, the marks use a blue hue near 01 from the Konjo palette. When combining temperature values, use the Multi color at 03, which sits opposite 01.
Accessibility
Margins between marks
For both multi- and single-hue colors, consecutive mark color tokens (e.g., mark.primary.01 and mark.primary.02) do not have sufficient contrast. Add white outlines or margins between marks to distinguish them.
Text on marks
Use the combinations below when placing text on marks. If the marks are too small for text, use a Tooltip to show the text on hover.
Text color combinations
For data visualization, we design contrast using WCAG 3.0 APCA as the standard. Follow the combinations below for marks and text.
Avoid relying solely on color
When differentiating chart types, avoid relying on color alone. Use supporting elements such as shapes, lines, patterns, and text.