Data Viz Color

The analytics palette is isolated from action and signal colors so data does not fight with UI calls to action.

Analytics palette

Color-blindness simulation

The same small data chart shown under different color-vision deficiencies. Rely on patterns, labels, and values — never color alone.

Real data test set

Quarterly throughput by cluster. The same numbers feed the responsive chart below.

Responsive chart

The SVG uses viewBox and CSS width so it reflows at any container size while keeping the data and labels intact.

Usage Rules

• Analytics colors are not CTA colors.
• Analytics colors are not brand hero colors.
• Do not use the same color for two adjacent data series.
• Keep legends close to the chart; use direct labeling when possible.
• Start value axes at zero unless a truncated scale is explicitly justified.
• Test every chart against protanopia, deuteranopia, tritanopia, and achromatopsia before shipping.