Diverging ramps

Use a diverging ramp for data on either side of a meaningful midpoint:

  • good – bad
  • decrease – increase
  • below – above average
  • more X – more Y

To build one, put two sequential ramps back to back, with a neutral centre (#F9F9F9) in between. Each side uses the same step set as a sequential ramp, mirrored.

These pairs have similar lightness at each step, so neither side looks heavier. They also stay distinct for red-green colour blindness.

Baltic – Cherry

The default for good–bad and decrease–increase.

Baltic 6#2B5B9B
Baltic 4#809DC3
Baltic 2#D5DEEB
Neutral#F9F9F9
Cherry 2#F2D8DB
Cherry 4#D78A94
Cherry 6#BC3C4C

Teal – Violet

Teal 6#338877
Teal 4#85B8AD
Teal 2#D6E7E4
Neutral#F9F9F9
Violet 2#E7D6EE
Violet 4#B885CC
Violet 6#8833AA

Sky – Coral

Softer, and suits fills on large areas. It uses steps 4, 6 and 8, because the standard steps are too pale for these ramps.

Sky 8#527A99
Sky 6#88CCFF
Sky 4#B8E0FF
Neutral#F9F9F9
Coral 4#FFC1AF
Coral 6#FF9779
Coral 8#995B49

Rules

Use an odd number of classes when the midpoint is a class of its own, such as “no change”. Use an even number when no value is truly neutral. Use at most nine classes: perception becomes unreliable beyond that.

On a white background, use Light Grey or Neutral for the centre. If the centre needs to stand out from the page, use Platinum.

Don’t use pairs that collapse for colour-blind readers: Teal – Cherry (the classic red–green) and Baltic – Violet. Also avoid pairs with very different lightness, such as Teal – Jasmine, where one side looks faded next to the other.

To test your own pair, simulate deuteranopia and protanopia in Viz Palette or Coblis, and check that the two ends stay clearly different and that equal steps look equally far from the centre.