Divergent

Divergent is the scheme for bipolar continuous data - when there is a meaningful pivot (zero, mean, baseline) and values spread to both sides. Seven stops with neutral in the middle: cool (blue) to neutral to warm (rose).

Choosing Red-Blue (RdBu) over Red-Green (RdYlGn) is not a style call - it is accessibility. Red-Green is inaccessible to about 8% of men with color vision deficiency.

div-1

div-2

div-3

div-4

div-5

div-6

div-7

Tokens

Token	Primitivo	Significado
--color-chart-div-1	blue-700	Polo frio (forte)
--color-chart-div-2	blue-500	Polo frio (médio)
--color-chart-div-3	blue-200	Polo frio (fraco)
--color-chart-div-4	neutral-200	Pivô neutro
--color-chart-div-5	rose-200	Polo quente (fraco)
--color-chart-div-6	rose-500	Polo quente (médio)
--color-chart-div-7	rose-700	Polo quente (forte)

When to use

Variation above/below the mean - KPI vs. baseline, regional vs. national performance.
Deviation maps - how far each region strays from the expected value.
Correlation (-1 to +1) - statistical correlation matrices.
Survey results - agreement (agree vs. disagree).
Sentiment shift - NPS or CSAT mood changes between periods.

When not to use

Without a natural pivot in the data, Divergent becomes just "two random colors". The reference point is what gives the poles their meaning.

If the data is nominal with no poles (regions, types), use Categorical. If it is ordered but has no pivot, use Sequential.

Anti-patterns

Red-Yellow-Green (RdYlGn) - forbidden. Gremorie does not ship this scheme, not even as an opt-in. For performance data with good/bad semantics where the traditional palette would call for red-yellow-green, use Divergent (Red-Blue) and add icons or labels to reinforce the semantics.

Using Divergent when the metric has no clear pivot. If you catch yourself arguing "the midpoint is roughly where most of the data sits", there is no pivot - use Sequential.

Usage example

import { Bar, BarChart, ReferenceLine } from 'recharts';

// Variação % vs baseline. Stops mapeados pela magnitude.
const tokenForVariation = (delta: number) => {
  if (delta < -20) return 'div-1'; // strongly negative
  if (delta < -5) return 'div-2';
  if (delta < 0) return 'div-3';
  if (delta === 0) return 'div-4'; // pivot
  if (delta < 5) return 'div-5';
  if (delta < 20) return 'div-6';
  return 'div-7'; // strongly positive
};

<BarChart data={regions}>
  <ReferenceLine y={0} stroke="var(--color-chart-div-4)" />
  <Bar
    dataKey="delta"
    fill={(entry) => `var(--color-chart-${tokenForVariation(entry.delta)})`}
  />
</BarChart>;