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#E41A1C
RGB(228, 26, 28)
HSL(359.41, 79.53%, 49.8%)
L*a*b*(49.58, 71.91, 55.1)
HCL(37.46, 90.59%, 49.58%)
Hex#377EB8
RGB(55, 126, 184)
HSL(206.98, 53.97%, 46.86%)
L*a*b*(50.35, -8.07, -37.73)
HCL(257.93, 38.58%, 50.35%)
Hex#4DAF4A
RGB(77, 175, 74)
HSL(118.22, 40.56%, 48.82%)
L*a*b*(64, -45.31, 41.82)
HCL(137.3, 61.66%, 64%)
Hex#984EA3
RGB(152, 78, 163)
HSL(292.24, 35.27%, 47.25%)
L*a*b*(45.18, 41.22, -32.9)
HCL(321.4, 52.74%, 45.18%)
Hex#FF7F00
RGB(255, 127, 0)
HSL(29.88, 100%, 50%)
L*a*b*(67.62, 45.96, 74.74)
HCL(58.41, 87.74%, 67.62%)
Hex#FFFF33
RGB(255, 255, 51)
HSL(60, 100%, 60%)
L*a*b*(97.69, -15.19, 86.72)
HCL(99.94, 88.04%, 97.69%)
Hex#A65628
RGB(166, 86, 40)
HSL(21.9, 61.17%, 40.39%)
L*a*b*(46.02, 31.16, 41.05)
HCL(52.79, 51.54%, 46.02%)
Hex#F781BF
RGB(247, 129, 191)
HSL(328.47, 88.06%, 73.73%)
L*a*b*(69.18, 51.18, -11.08)
HCL(347.79, 52.36%, 69.18%)
Hex#999999
RGB(153, 153, 153)
HSL(NaN, 0%, 60%)
L*a*b*(63.22, 0, 0)
HCL(NaN, 0%, 63.22%)
RGB
Hex#E41A1C
RGB(228, 26, 28)
HSL(359.41, 79.53%, 49.8%)
L*a*b*(49.58, 71.91, 55.1)
HCL(37.46, 90.59%, 49.58%)
Hex#377EB8
RGB(55, 126, 184)
HSL(206.98, 53.97%, 46.86%)
L*a*b*(50.35, -8.07, -37.73)
HCL(257.93, 38.58%, 50.35%)
Hex#4DAF4A
RGB(77, 175, 74)
HSL(118.22, 40.56%, 48.82%)
L*a*b*(64, -45.31, 41.82)
HCL(137.3, 61.66%, 64%)
Hex#984EA3
RGB(152, 78, 163)
HSL(292.24, 35.27%, 47.25%)
L*a*b*(45.18, 41.22, -32.9)
HCL(321.4, 52.74%, 45.18%)
Hex#FF7F00
RGB(255, 127, 0)
HSL(29.88, 100%, 50%)
L*a*b*(67.62, 45.96, 74.74)
HCL(58.41, 87.74%, 67.62%)
Hex#FFFF33
RGB(255, 255, 51)
HSL(60, 100%, 60%)
L*a*b*(97.69, -15.19, 86.72)
HCL(99.94, 88.04%, 97.69%)
Hex#A65628
RGB(166, 86, 40)
HSL(21.9, 61.17%, 40.39%)
L*a*b*(46.02, 31.16, 41.05)
HCL(52.79, 51.54%, 46.02%)
Hex#F781BF
RGB(247, 129, 191)
HSL(328.47, 88.06%, 73.73%)
L*a*b*(69.18, 51.18, -11.08)
HCL(347.79, 52.36%, 69.18%)
Hex#999999
RGB(153, 153, 153)
HSL(NaN, 0%, 60%)
L*a*b*(63.22, 0, 0)
HCL(NaN, 0%, 63.22%)
HSL
Hex#E41A1C
RGB(228, 26, 28)
HSL(359.41, 79.53%, 49.8%)
L*a*b*(49.58, 71.91, 55.1)
HCL(37.46, 90.59%, 49.58%)
Hex#377EB8
RGB(55, 126, 184)
HSL(206.98, 53.97%, 46.86%)
L*a*b*(50.35, -8.07, -37.73)
HCL(257.93, 38.58%, 50.35%)
Hex#4DAF4A
RGB(77, 175, 74)
HSL(118.22, 40.56%, 48.82%)
L*a*b*(64, -45.31, 41.82)
HCL(137.3, 61.66%, 64%)
Hex#984EA3
RGB(152, 78, 163)
HSL(292.24, 35.27%, 47.25%)
L*a*b*(45.18, 41.22, -32.9)
HCL(321.4, 52.74%, 45.18%)
Hex#FF7F00
RGB(255, 127, 0)
HSL(29.88, 100%, 50%)
L*a*b*(67.62, 45.96, 74.74)
HCL(58.41, 87.74%, 67.62%)
Hex#FFFF33
RGB(255, 255, 51)
HSL(60, 100%, 60%)
L*a*b*(97.69, -15.19, 86.72)
HCL(99.94, 88.04%, 97.69%)
Hex#A65628
RGB(166, 86, 40)
HSL(21.9, 61.17%, 40.39%)
L*a*b*(46.02, 31.16, 41.05)
HCL(52.79, 51.54%, 46.02%)
Hex#F781BF
RGB(247, 129, 191)
HSL(328.47, 88.06%, 73.73%)
L*a*b*(69.18, 51.18, -11.08)
HCL(347.79, 52.36%, 69.18%)
Hex#999999
RGB(153, 153, 153)
HSL(NaN, 0%, 60%)
L*a*b*(63.22, 0, 0)
HCL(NaN, 0%, 63.22%)
L*a*b*
Hex#E41A1C
RGB(228, 26, 28)
HSL(359.41, 79.53%, 49.8%)
L*a*b*(49.58, 71.91, 55.1)
HCL(37.46, 90.59%, 49.58%)
Hex#377EB8
RGB(55, 126, 184)
HSL(206.98, 53.97%, 46.86%)
L*a*b*(50.35, -8.07, -37.73)
HCL(257.93, 38.58%, 50.35%)
Hex#4DAF4A
RGB(77, 175, 74)
HSL(118.22, 40.56%, 48.82%)
L*a*b*(64, -45.31, 41.82)
HCL(137.3, 61.66%, 64%)
Hex#984EA3
RGB(152, 78, 163)
HSL(292.24, 35.27%, 47.25%)
L*a*b*(45.18, 41.22, -32.9)
HCL(321.4, 52.74%, 45.18%)
Hex#FF7F00
RGB(255, 127, 0)
HSL(29.88, 100%, 50%)
L*a*b*(67.62, 45.96, 74.74)
HCL(58.41, 87.74%, 67.62%)
Hex#FFFF33
RGB(255, 255, 51)
HSL(60, 100%, 60%)
L*a*b*(97.69, -15.19, 86.72)
HCL(99.94, 88.04%, 97.69%)
Hex#A65628
RGB(166, 86, 40)
HSL(21.9, 61.17%, 40.39%)
L*a*b*(46.02, 31.16, 41.05)
HCL(52.79, 51.54%, 46.02%)
Hex#F781BF
RGB(247, 129, 191)
HSL(328.47, 88.06%, 73.73%)
L*a*b*(69.18, 51.18, -11.08)
HCL(347.79, 52.36%, 69.18%)
Hex#999999
RGB(153, 153, 153)
HSL(NaN, 0%, 60%)
L*a*b*(63.22, 0, 0)
HCL(NaN, 0%, 63.22%)
HCL
Hex#E41A1C
RGB(228, 26, 28)
HSL(359.41, 79.53%, 49.8%)
L*a*b*(49.58, 71.91, 55.1)
HCL(37.46, 90.59%, 49.58%)
Hex#377EB8
RGB(55, 126, 184)
HSL(206.98, 53.97%, 46.86%)
L*a*b*(50.35, -8.07, -37.73)
HCL(257.93, 38.58%, 50.35%)
Hex#4DAF4A
RGB(77, 175, 74)
HSL(118.22, 40.56%, 48.82%)
L*a*b*(64, -45.31, 41.82)
HCL(137.3, 61.66%, 64%)
Hex#984EA3
RGB(152, 78, 163)
HSL(292.24, 35.27%, 47.25%)
L*a*b*(45.18, 41.22, -32.9)
HCL(321.4, 52.74%, 45.18%)
Hex#FF7F00
RGB(255, 127, 0)
HSL(29.88, 100%, 50%)
L*a*b*(67.62, 45.96, 74.74)
HCL(58.41, 87.74%, 67.62%)
Hex#FFFF33
RGB(255, 255, 51)
HSL(60, 100%, 60%)
L*a*b*(97.69, -15.19, 86.72)
HCL(99.94, 88.04%, 97.69%)
Hex#A65628
RGB(166, 86, 40)
HSL(21.9, 61.17%, 40.39%)
L*a*b*(46.02, 31.16, 41.05)
HCL(52.79, 51.54%, 46.02%)
Hex#F781BF
RGB(247, 129, 191)
HSL(328.47, 88.06%, 73.73%)
L*a*b*(69.18, 51.18, -11.08)
HCL(347.79, 52.36%, 69.18%)
Hex#999999
RGB(153, 153, 153)
HSL(NaN, 0%, 60%)
L*a*b*(63.22, 0, 0)
HCL(NaN, 0%, 63.22%)
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