ColorBrewer interpolation comparison

datavissoftware development

The ColorBrewer color scheme picking tool is a wizard in the data visualisation world, especially for maps. What makes these color schemes so powerful?

A good color scheme has some mathematical properties like perceptual uniformity, or it should be distinguable for color blind people. Let's compare the ColorBrewer schemes with generated scheme using linear interpolation in 4 color spaces. And don't forget that the 'rules' differ for qualitative, ordinal and interval data.

Some ColorBrewer schemes look like the ones created with interpolation in HSL space, but some others in HCL. It looks like there is no general pattern.

Pick a color set at the right to compare several ColorBrewer schemes. The swatch count slider is used to determine the ColorBrewer scheme size.

ColorBrewer
Hex#FFFFCC
RGB(255, 255, 204)
HSL(60, 100%, 90%)
L*a*b*(99.06, -5.96, 24.51)
HCL(103.67, 25.22%, 99.06%)
Hex#FFEDA0
RGB(255, 237, 160)
HSL(48.63, 100%, 81.37%)
L*a*b*(93.92, -1.54, 39.65)
HCL(92.23, 39.68%, 93.92%)
Hex#FED976
RGB(254, 217, 118)
HSL(43.68, 98.55%, 72.94%)
L*a*b*(88.4, 4.74, 53.14)
HCL(84.9, 53.35%, 88.4%)
Hex#FEB24C
RGB(254, 178, 76)
HSL(34.38, 98.89%, 64.71%)
L*a*b*(78.7, 21.98, 61.52)
HCL(70.34, 65.33%, 78.7%)
Hex#FD8D3C
RGB(253, 141, 60)
HSL(25.18, 97.97%, 61.37%)
L*a*b*(70.33, 39.34, 60.22)
HCL(56.84, 71.93%, 70.33%)
Hex#FC4E2A
RGB(252, 78, 42)
HSL(10.29, 97.22%, 57.65%)
L*a*b*(59.22, 65.67, 58.31)
HCL(41.6, 87.83%, 59.22%)
Hex#E31A1C
RGB(227, 26, 28)
HSL(359.4, 79.45%, 49.61%)
L*a*b*(49.38, 71.65, 54.84)
HCL(37.43, 90.23%, 49.38%)
Hex#BD0026
RGB(189, 0, 38)
HSL(347.94, 100%, 37.06%)
L*a*b*(40.31, 64.96, 38.33)
HCL(30.54, 75.42%, 40.31%)
Hex#800026
RGB(128, 0, 38)
HSL(342.19, 100%, 25.1%)
L*a*b*(26.51, 49.25, 18.62)
HCL(20.72, 52.65%, 26.51%)
RGB
Hex#FFFFCC
RGB(255, 255, 204)
HSL(60, 100%, 90%)
L*a*b*(99.06, -5.96, 24.51)
HCL(103.67, 25.22%, 99.06%)
Hex#EFDFB7
RGB(239, 223, 183)
HSL(42.86, 63.64%, 82.75%)
L*a*b*(89.38, 1.12, 21.77)
HCL(87.05, 21.8%, 89.38%)
Hex#DFBFA3
RGB(223, 191, 163)
HSL(28, 48.39%, 75.69%)
L*a*b*(79.61, 8.71, 18.62)
HCL(64.94, 20.56%, 79.61%)
Hex#CF9F8E
RGB(207, 159, 142)
HSL(15.69, 40.37%, 68.43%)
L*a*b*(69.74, 16.63, 16.14)
HCL(44.14, 23.18%, 69.74%)
Hex#C08079
RGB(192, 128, 121)
HSL(5.92, 36.04%, 61.37%)
L*a*b*(60.21, 24.85, 14.49)
HCL(30.24, 28.76%, 60.21%)
Hex#B06064
RGB(176, 96, 100)
HSL(357, 33.61%, 53.33%)
L*a*b*(50.47, 33.41, 12.94)
HCL(21.17, 35.82%, 50.47%)
Hex#A04050
RGB(160, 64, 80)
HSL(350, 42.86%, 43.92%)
L*a*b*(41.19, 41.62, 11.93)
HCL(15.99, 43.3%, 41.19%)
Hex#90203B
RGB(144, 32, 59)
HSL(345.54, 63.64%, 34.51%)
L*a*b*(32.93, 47.71, 13.62)
HCL(15.93, 49.62%, 32.93%)
Hex#800026
RGB(128, 0, 38)
HSL(342.19, 100%, 25.1%)
L*a*b*(26.51, 49.25, 18.62)
HCL(20.72, 52.65%, 26.51%)
HSL
Hex#FFFFCC
RGB(255, 255, 204)
HSL(60, 100%, 90%)
L*a*b*(99.06, -5.96, 24.51)
HCL(103.67, 25.22%, 99.06%)
Hex#FFF0A3
RGB(255, 240, 163)
HSL(50.22, 100%, 81.96%)
L*a*b*(94.71, -2.72, 39.18)
HCL(93.97, 39.28%, 94.71%)
Hex#FFD479
RGB(255, 212, 121)
HSL(40.75, 100%, 73.73%)
L*a*b*(87.29, 7.74, 50.47)
HCL(81.28, 51.06%, 87.29%)
Hex#FFAA50
RGB(255, 170, 80)
HSL(30.86, 100%, 65.69%)
L*a*b*(77.01, 26.5, 58.12)
HCL(65.49, 63.88%, 77.01%)
Hex#FF7326
RGB(255, 115, 38)
HSL(21.29, 100%, 57.45%)
L*a*b*(65.48, 51.78, 64.97)
HCL(51.44, 83.08%, 65.48%)
Hex#FC3000
RGB(252, 48, 0)
HSL(11.43, 100%, 49.41%)
L*a*b*(55.87, 73.97, 69.7)
HCL(43.3, 101.63%, 55.87%)
Hex#D30600
RGB(211, 6, 0)
HSL(1.71, 100%, 41.37%)
L*a*b*(45.12, 69.54, 60.61)
HCL(41.07, 92.25%, 45.12%)
Hex#A90017
RGB(169, 0, 23)
HSL(351.83, 100%, 33.14%)
L*a*b*(35.75, 59.61, 40.89)
HCL(34.45, 72.29%, 35.75%)
Hex#800026
RGB(128, 0, 38)
HSL(342.19, 100%, 25.1%)
L*a*b*(26.51, 49.25, 18.62)
HCL(20.72, 52.65%, 26.51%)
L*a*b*
Hex#FFFFCC
RGB(255, 255, 204)
HSL(60, 100%, 90%)
L*a*b*(99.06, -5.96, 24.51)
HCL(103.67, 25.22%, 99.06%)
Hex#F1E1B5
RGB(241, 225, 181)
HSL(44, 68.18%, 82.75%)
L*a*b*(90.02, 0.71, 23.7)
HCL(88.28, 23.71%, 90.02%)
Hex#E3C39E
RGB(227, 195, 158)
HSL(32.17, 55.2%, 75.49%)
L*a*b*(80.9, 7.79, 23.08)
HCL(71.36, 24.36%, 80.9%)
Hex#D4A688
RGB(212, 166, 136)
HSL(23.68, 46.91%, 68.24%)
L*a*b*(71.88, 14.48, 22.4)
HCL(57.12, 26.67%, 71.88%)
Hex#C58973
RGB(197, 137, 115)
HSL(16.1, 41.41%, 61.18%)
L*a*b*(62.84, 21.65, 21.51)
HCL(44.83, 30.52%, 62.84%)
Hex#B56C5E
RGB(181, 108, 94)
HSL(9.66, 37.02%, 53.92%)
L*a*b*(53.72, 28.72, 20.92)
HCL(36.08, 35.53%, 53.72%)
Hex#A44F4A
RGB(164, 79, 74)
HSL(3.33, 37.82%, 46.67%)
L*a*b*(44.63, 35.51, 20.3)
HCL(29.75, 40.9%, 44.63%)
Hex#923038
RGB(146, 48, 56)
HSL(355.1, 50.52%, 38.04%)
L*a*b*(35.51, 42.27, 18.98)
HCL(24.18, 46.33%, 35.51%)
Hex#800026
RGB(128, 0, 38)
HSL(342.19, 100%, 25.1%)
L*a*b*(26.51, 49.25, 18.62)
HCL(20.72, 52.65%, 26.51%)
HCL
Hex#FFFFCC
RGB(255, 255, 204)
HSL(60, 100%, 90%)
L*a*b*(99.06, -5.96, 24.51)
HCL(103.67, 25.22%, 99.06%)
Hex#EFE2AB
RGB(239, 226, 171)
HSL(48.53, 68%, 80.39%)
L*a*b*(89.95, -1.49, 28.67)
HCL(92.97, 28.71%, 89.95%)
Hex#E0C58D
RGB(224, 197, 141)
HSL(40.48, 57.24%, 71.57%)
L*a*b*(80.86, 4.11, 31.82)
HCL(82.65, 32.09%, 80.86%)
Hex#D2A872
RGB(210, 168, 114)
HSL(33.75, 51.61%, 63.53%)
L*a*b*(71.85, 10.88, 34)
HCL(72.26, 35.69%, 71.85%)
Hex#C38B5B
RGB(195, 139, 91)
HSL(27.69, 46.43%, 56.08%)
L*a*b*(62.75, 18.04, 34.42)
HCL(62.34, 38.86%, 62.75%)
Hex#B46E48
RGB(180, 110, 72)
HSL(21.11, 42.86%, 49.41%)
L*a*b*(53.74, 25.86, 33.3)
HCL(52.16, 42.16%, 53.74%)
Hex#A45039
RGB(164, 80, 57)
HSL(12.9, 48.42%, 43.33%)
L*a*b*(44.6, 34.08, 30.26)
HCL(41.6, 45.58%, 44.6%)
Hex#93302E
RGB(147, 48, 46)
HSL(1.19, 52.33%, 37.84%)
L*a*b*(35.55, 42.17, 25.35)
HCL(31.02, 49.2%, 35.55%)
Hex#800026
RGB(128, 0, 38)
HSL(342.19, 100%, 25.1%)
L*a*b*(26.51, 49.25, 18.62)
HCL(20.72, 52.65%, 26.51%)
If you want, you can add you own color sets and experiment with the settings.

Comparison per channel

In our comparison we are interested in how much a swatch differs from the ColorBrewer swatch with the same index. If we plot the swatch indices on the x-axis and the channel value on the y-axis, it is easy to compare ColorBrewer and the schemes generated with linear interpolation in a certain space.

Note that scheme in RGB results a straight line on the R, G and B channel. The same goes for the other color spaces and their respective channels.

Settings
0.00.10.20.30.40.50.60.70.80.91.0012345678
ColorBrewer
RGB
HSL
L*a*b*
HCL