Color Scales
Scales aren't just for positions — they're also essential for mapping data to colors. A bit of color theory goes a long way in dataviz.
Let's explore D3's three main color scale types — sequential, diverging, and categorical — and learn how to use them with React.
Members only
5 minutes readLinear interpolation in RGB space
A naive approach to transition between two colors is to linearly interpolate each RGB channel independently. Pick two colors below and observe the transition:
#ff0000
#00ff00
RGB interpolation
255
0
0
0
0
227
28
0
28
0
198
57
0
57
0
170
85
0
85
0
142
113
0
113
0
113
142
0
142
0
85
170
0
170
0
57
198
0
198
0
28
227
0
227
0
0
255
0
255
0
CIELAB interpolation
255
0
0
0
0
246
79
0
79
0
235
112
0
112
0
223
138
0
138
0
209
161
0
161
0
192
182
0
182
0
171
201
0
201
0
144
220
0
220
0
106
238
0
238
0
0
255
0
255
0
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏