Uploaded May 2021 | Updated September 2026, 1 week ago

---

This quick tip shows you the theory behind stepping through a rainbow of hues using hsl() css background color. We'll use some vanilla JavaScript and GreenSock to compare approaches. Demos below


Unlock over 100 premium GreenSock tutorials at
creativecodingclub.com/bundles/creative-coding-club?src=ytrainbow


Take your scripted animation skills to the next level through over 17 hours of on-demand video training. I'll share with you a decade of experience bringing art to life with code.



GreenSock basic demo
codepen.io/snorkltv/pen/OJpWYYJ?editors=0010


GreenSock circular demo
codepen.io/snorkltv/pen/dyvNLpX?editors=0110



Vanilla JS demo
codepen.io/snorkltv/pen/vYxxNJB?editors=0110