color lerp (RGB vs HSL) — live canvas animation example

motion & easing8+
trig, angles & vectors8+
collision detection11+
numbers in motion7+
geometry & shapes8+
generative showpieces13+
handy helpers7-

Two ways to blend the same two colors.

The top bar mixes the red, green and blue channels straight across (lerpColor). It looks obvious — but blend two opposite colors like blue and yellow and the middle turns to mud: equal channels means gray.

The bottom bar blends through HSL instead (lerpColorHsl), rotating the hue around the color wheel. Same start and end, but it stays vivid the whole way. Watch the two big swatches as the marker crosses the middle — that's the whole lesson.

Pick your own start/end colors below. Complementary pairs show the difference best.