Smashing Animations Part 8: Theming Animations Using CSS Relative Colour - Smashing Magazine

"I've recently refreshed the animated graphics on my website with a new theme and a group of pioneering characters, putting into practice plenty of the techniques I shared in this series. A few of my animations change appearance when someone interacts with them or at different times of day. The colours in the graphic atop my blog pages change from morning until night every day."

"While working on this, I started to wonder whether CSS relative colour values could give me more control while also simplifying the process. Note: In this tutorial, I'll focus on relative colour values and the OKLCH colour space for theming graphics and animations. If you want to dive deep into relative colour, Ahmad Shadeed created a superb interactive guide. As for colour spaces, gamuts, and OKLCH, our own Geoff Graham wrote about them."

"The Hanna-Barbera animated series I grew up watching had budgets far lower than those available when William Hanna and Joseph Barbera produced Tom and Jerry shorts at MGM Cartoons. This meant the animators needed to develop techniques to work around their cost restrictions. Repeated use of elements was key. Backgrounds were reused whenever possible, with zooms and overlays helping construct new scenes from the same artwork. It was born of necessity, but it also encouraged thinking in terms of series rather than individual scenes."

CSS relative colour values are now widely supported and enable theming and animation of SVG graphics using the OKLCH colour space. Animated graphics can change appearance in response to interaction or time of day, for example shifting blog header colours from morning until night and offering a snow mode via an overlay layer and blending modes. Relative colour values offer finer control and simplify palette management, reducing the need for manual updates. Historical cartoon animation techniques emphasized reusing elements, backgrounds, and overlays to build new scenes, a practice that informs efficient modern animation workflows.

Read at Smashing Magazine