Color in Data Visualization: Sequential, Categorical, and Diverging Palettes Explained

Data visualization color follows a different set of rules from brand or UI color — the palette must encode information accurately, survive colorblindness, and remain legible at small scales and in print. This guide covers the three palette types every data designer needs, how to build each, and the most common mistakes that make charts misleading.

Data VisualizationColor SystemsAccessibility

Key points

Match palette type to data type: sequential for ordered data (light to dark), categorical for distinct groups (maximally different hues), diverging for data with a meaningful center point (two-hue ramp with neutral middle). Using the wrong type makes charts misleading rather than merely ugly.

Any valid sequential palette should pass as a correct ordering when converted to grayscale. If the grayscale version looks randomly ordered, the lightness encoding is broken and the chart will fail for colorblind users.

Colorblind-safe defaults: Okabe-Ito palette for categorical data, viridis or cividis for sequential data, orange-purple or blue-red for diverging data. Avoid red-green as the sole differentiator in any chart.

Sequential palettes: encoding ordered data

Sequential palettes encode data with a natural low-to-high order — temperature, revenue, time, density. The principle: lighter values represent lower quantities, darker values represent higher quantities. Single-hue sequential palettes (light blue to dark blue) are the most reliable and the most colorblind-safe. Two-hue sequential palettes (yellow to blue, yellow to green) can provide more perceptual range but must still maintain a consistent lightness progression — the hue transition must not create a local lightness anomaly. The test: convert the sequential palette to grayscale. Each step should be visibly darker than the last. If any step appears lighter than its neighbor in grayscale, the palette has a lightness inversion that will produce ordering errors. OKLCH is the most effective color space for building sequential palettes because it provides perceptually uniform lightness — a 10-unit OKLCH lightness step looks the same regardless of hue. Building a sequential ramp in HSL or RGB often produces lightness anomalies at certain hues (yellow is perceptually much lighter than blue at the same HSL lightness).

Categorical palettes: encoding distinct groups

Categorical palettes are used for data with no inherent ordering — country, product category, demographic group. Each category receives a distinct hue; hues should be as different as possible to minimize confusion. The constraints: (1) Limit to 6-8 categories in a single chart — above 8, confusability increases steeply, particularly for colorblind users. (2) Keep lightness similar across all categories — if one category's color is significantly darker, it appears more important regardless of the data. (3) Test for colorblindness — run deuteranopia and protanopia simulations and identify any pairs that become visually identical. Replace one color in any confusable pair with a distinct alternative. (4) For print: ensure each category achieves at least 3:1 contrast on white, which is the WCAG minimum for non-text elements. The Okabe-Ito palette (published by Masataka Okabe and Kei Ito) provides 8 colors specifically designed for color vision deficiency safety and is an excellent starting point for categorical data work.

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Browse packs More guides

Related guides

Data Visualization

Color for Data Visualization: Building Perceptually Correct Chart Palettes

Data visualization color is not brand color. The goal is accurate encoding, not aesthetic harmony. This guide covers the four semantic color roles in dataviz, perceptual uniformity requirements, color blindness constraints, and how to build categorical, sequential, and diverging palettes that communicate data without misleading it.

Motion Design

Color in Motion: Designing Transitions, Hover States, and Loading Colors That Work

Motion changes how color is perceived. This guide covers the perceptual phenomena unique to animated color — chromatic flicker, saturation amplification through transition, and why OKLCH is the correct interpolation space for color animation. Practical rules for hover states, skeleton screens, and brand reveal animations.

Color Management

Wide Gamut and HDR Color for Designers: P3, OKLCH, and When It Actually Matters

HDR displays and wide-gamut color spaces are now standard on the devices your users have — but most design workflows still produce only sRGB output. This guide explains when the gap between sRGB and wide gamut is visible and consequential, how to progressively enhance your color palette for P3 displays, and what tools in CSS and Figma make wide-gamut color practical today.