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#FFF5F0
RGB(255, 245, 240)
HSL(20, 100%, 97.06%)
L*a*b*(97.22, 2.84, 3.67)
HCL(52.3, 4.64%, 97.22%)
Hex#FEE0D2
RGB(254, 224, 210)
HSL(19.09, 95.65%, 90.98%)
L*a*b*(91.41, 9.07, 10.87)
HCL(50.15, 14.16%, 91.41%)
Hex#FCBBA1
RGB(252, 187, 161)
HSL(17.14, 93.81%, 80.98%)
L*a*b*(81.54, 21.76, 22.88)
HCL(46.44, 31.57%, 81.54%)
Hex#FC9272
RGB(252, 146, 114)
HSL(13.91, 95.83%, 71.76%)
L*a*b*(71.75, 38.75, 35.14)
HCL(42.2, 52.31%, 71.75%)
Hex#FB6A4A
RGB(251, 106, 74)
HSL(10.85, 95.68%, 63.73%)
L*a*b*(63.52, 55.16, 46.65)
HCL(40.22, 72.24%, 63.52%)
Hex#EF3B2C
RGB(239, 59, 44)
HSL(4.62, 85.9%, 55.49%)
L*a*b*(54.55, 67.84, 52.38)
HCL(37.67, 85.71%, 54.55%)
Hex#CB181D
RGB(203, 24, 29)
HSL(358.32, 78.85%, 44.51%)
L*a*b*(44.26, 65.64, 48.03)
HCL(36.2, 81.33%, 44.26%)
Hex#A50F15
RGB(165, 15, 21)
HSL(357.6, 83.33%, 35.29%)
L*a*b*(35.52, 56.64, 41.31)
HCL(36.11, 70.11%, 35.52%)
Hex#67000D
RGB(103, 0, 13)
HSL(352.43, 100%, 20.2%)
L*a*b*(20.21, 41.74, 25.86)
HCL(31.78, 49.1%, 20.21%)
RGB
Hex#FFF5F0
RGB(255, 245, 240)
HSL(20, 100%, 97.06%)
L*a*b*(97.22, 2.84, 3.67)
HCL(52.3, 4.64%, 97.22%)
Hex#ECD6D4
RGB(236, 214, 212)
HSL(5, 38.71%, 87.84%)
L*a*b*(87.42, 7.62, 3.9)
HCL(27.11, 8.57%, 87.42%)
Hex#D9B8B7
RGB(217, 184, 183)
HSL(1.76, 30.91%, 78.43%)
L*a*b*(77.68, 12.1, 5.15)
HCL(23.05, 13.15%, 77.68%)
Hex#C6999B
RGB(198, 153, 155)
HSL(357.33, 28.3%, 68.82%)
L*a*b*(67.57, 17.55, 5.78)
HCL(18.21, 18.48%, 67.57%)
Hex#B37B7F
RGB(179, 123, 127)
HSL(355.71, 26.92%, 59.22%)
L*a*b*(57.57, 22.88, 7.11)
HCL(17.27, 23.96%, 57.57%)
Hex#A05C62
RGB(160, 92, 98)
HSL(354.71, 26.98%, 49.41%)
L*a*b*(47.28, 29.01, 9.31)
HCL(17.79, 30.47%, 47.28%)
Hex#8D3D46
RGB(141, 61, 70)
HSL(353.25, 39.6%, 39.61%)
L*a*b*(37.19, 35.3, 12.14)
HCL(18.97, 37.33%, 37.19%)
Hex#7A1F29
RGB(122, 31, 41)
HSL(353.41, 59.48%, 30%)
L*a*b*(27.97, 40.03, 18.05)
HCL(24.28, 43.91%, 27.97%)
Hex#67000D
RGB(103, 0, 13)
HSL(352.43, 100%, 20.2%)
L*a*b*(20.21, 41.74, 25.86)
HCL(31.78, 49.1%, 20.21%)
HSL
Hex#FFF5F0
RGB(255, 245, 240)
HSL(20, 100%, 97.06%)
L*a*b*(97.22, 2.84, 3.67)
HCL(52.3, 4.64%, 97.22%)
Hex#FFD1BF
RGB(255, 209, 191)
HSL(16.87, 100%, 87.45%)
L*a*b*(87.54, 14.78, 15.37)
HCL(46.12, 21.33%, 87.54%)
Hex#FFA78E
RGB(255, 167, 142)
HSL(13.27, 100%, 77.84%)
L*a*b*(77.04, 31.37, 27.05)
HCL(40.77, 41.42%, 77.04%)
Hex#FF775D
RGB(255, 119, 93)
HSL(9.63, 100%, 68.24%)
L*a*b*(66.63, 51.56, 40.29)
HCL(38, 65.43%, 66.63%)
Hex#FF422C
RGB(255, 66, 44)
HSL(6.26, 100%, 58.63%)
L*a*b*(58.33, 70.49, 56.97)
HCL(38.94, 90.63%, 58.33%)
Hex#FA0C00
RGB(250, 12, 0)
HSL(2.88, 100%, 49.02%)
L*a*b*(53.53, 78.81, 68.89)
HCL(41.16, 104.67%, 53.53%)
Hex#C90002
RGB(201, 0, 2)
HSL(359.4, 100%, 39.41%)
L*a*b*(42.76, 67.56, 57.68)
HCL(40.49, 88.84%, 42.76%)
Hex#98000A
RGB(152, 0, 10)
HSL(356.05, 100%, 29.8%)
L*a*b*(31.82, 55.02, 42.51)
HCL(37.69, 69.53%, 31.82%)
Hex#67000D
RGB(103, 0, 13)
HSL(352.43, 100%, 20.2%)
L*a*b*(20.21, 41.74, 25.86)
HCL(31.78, 49.1%, 20.21%)
L*a*b*
Hex#FFF5F0
RGB(255, 245, 240)
HSL(20, 100%, 97.06%)
L*a*b*(97.22, 2.84, 3.67)
HCL(52.3, 4.64%, 97.22%)
Hex#EED6D0
RGB(238, 214, 208)
HSL(12, 46.88%, 87.45%)
L*a*b*(87.51, 7.87, 6.16)
HCL(38.05, 10%, 87.51%)
Hex#DDB8B0
RGB(221, 184, 176)
HSL(10.67, 39.82%, 77.84%)
L*a*b*(77.92, 12.82, 9.32)
HCL(36.02, 15.85%, 77.92%)
Hex#CB9B92
RGB(203, 155, 146)
HSL(9.47, 35.4%, 68.43%)
L*a*b*(68.41, 17.51, 12.03)
HCL(34.48, 21.25%, 68.41%)
Hex#B87E75
RGB(184, 126, 117)
HSL(8.06, 32.06%, 59.02%)
L*a*b*(58.7, 22.33, 14.5)
HCL(33, 26.62%, 58.7%)
Hex#A56259
RGB(165, 98, 89)
HSL(7.11, 29.92%, 49.8%)
L*a*b*(49.17, 27.1, 17.36)
HCL(32.65, 32.18%, 49.17%)
Hex#91463E
RGB(145, 70, 62)
HSL(5.78, 40.1%, 40.59%)
L*a*b*(39.55, 31.81, 20.33)
HCL(32.59, 37.75%, 39.55%)
Hex#7C2825
RGB(124, 40, 37)
HSL(2.07, 54.04%, 31.57%)
L*a*b*(29.71, 36.88, 22.84)
HCL(31.77, 43.38%, 29.71%)
Hex#67000D
RGB(103, 0, 13)
HSL(352.43, 100%, 20.2%)
L*a*b*(20.21, 41.74, 25.86)
HCL(31.78, 49.1%, 20.21%)
HCL
Hex#FFF5F0
RGB(255, 245, 240)
HSL(20, 100%, 97.06%)
L*a*b*(97.22, 2.84, 3.67)
HCL(52.3, 4.64%, 97.22%)
Hex#EDD7CD
RGB(237, 215, 205)
HSL(18.75, 47.06%, 86.67%)
L*a*b*(87.61, 6.67, 7.86)
HCL(49.7, 10.31%, 87.61%)
Hex#DBB9AC
RGB(219, 185, 172)
HSL(16.6, 39.5%, 76.67%)
L*a*b*(77.9, 11.12, 11.4)
HCL(45.72, 15.92%, 77.9%)
Hex#C89C8C
RGB(200, 156, 140)
HSL(16, 35.29%, 66.67%)
L*a*b*(68.22, 15.21, 15.02)
HCL(44.64, 21.38%, 68.22%)
Hex#B6806F
RGB(182, 128, 111)
HSL(14.37, 32.72%, 57.45%)
L*a*b*(58.83, 19.92, 18.04)
HCL(42.16, 26.88%, 58.83%)
Hex#A36353
RGB(163, 99, 83)
HSL(12, 32.52%, 48.24%)
L*a*b*(49.03, 25.29, 20.63)
HCL(39.2, 32.64%, 49.03%)
Hex#8F473A
RGB(143, 71, 58)
HSL(9.18, 42.29%, 39.41%)
L*a*b*(39.39, 30.23, 22.47)
HCL(36.62, 37.67%, 39.39%)
Hex#7C2922
RGB(124, 41, 34)
HSL(4.67, 56.96%, 30.98%)
L*a*b*(29.84, 36.32, 24.88)
HCL(34.41, 44.02%, 29.84%)
Hex#67000D
RGB(103, 0, 13)
HSL(352.43, 100%, 20.2%)
L*a*b*(20.21, 41.74, 25.86)
HCL(31.78, 49.1%, 20.21%)
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
ColorBrewer
RGB
HSL
L*a*b*
HCL