Sequential

Sequential is the single-hue scheme - five blue stops, from 200 (lightest) to 900 (darkest). It is color-blind safe by construction: the reading happens through lightness, not hue. Even a reader with deuteranopia (the most common form of color vision deficiency) can order the stops without trouble.

seq-1

seq-2

seq-3

seq-4

seq-5

Tokens

Amostra	Token	Primitivo
	--color-chart-seq-1	blue-200
	--color-chart-seq-2	blue-400
	--color-chart-seq-3	blue-600
	--color-chart-seq-4	blue-700
	--color-chart-seq-5	blue-900

When to use

Activity heatmaps by hour or day - positional density, a natural low to high order.
Choropleth maps - population density, event rate per region.
Gradient bar charts - when magnitude is the point and you want to reinforce the reading visually.
Ordered intensity scales - detractor to passive to promoter (NPS), low to medium to high (severity).

When not to use

Categories without order (regions, product types). Sequential suggests a progression that does not exist - you are misleading the reader about the structure of the data.

Use Categorical instead.

Anti-patterns

Applying Sequential to a bipolar scale with a meaningful midpoint (variation above/below the mean, sentiment) - you erase the neutral pivot and lose the reference point. Use Divergent.

Using more than 5 stops in a Sequential chart - from 6 on, the lightness difference between adjacent stops becomes too subtle for reliable reading. If you need more granularity, consider a continuous scale (e.g. interpolate(blue-200, blue-900)) instead of discrete stops.

Usage example

import { Bar, BarChart } from 'recharts';

const data = [
  { hora: '09h', uso: 12, level: 'seq-1' },
  { hora: '12h', uso: 87, level: 'seq-4' },
  { hora: '15h', uso: 134, level: 'seq-5' },
];

<BarChart data={data}>
  <Bar dataKey="uso" fill={(entry) => `var(--color-chart-${entry.level})`} />
</BarChart>;