• Smashing Animations Part 8: Theming Animations Using CSS Relative Colour 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. • Then, there’s the snow mode, which adds chilly colours and a wintery theme, courtesy of an overlay layer and a blending mode. • 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.
Article Summaries:
- Smashing Magazine’s latest “Smashing Animations Part 8” explores how to theme animated graphics using CSS relative colour values and the OKLCH colour space. The author updates his site’s animated graphics-adding day‑to‑night colour shifts, interactive hover changes, and a winter “snow mode” overlay-by leveraging relative colour values to simplify palette management. He highlights how OKLCH allows precise control over lightness and chroma, reducing the need to manually create new shades for each foundation colour. The tutorial references Ahmad Shadeed’s interactive guide on relative colour and Geoff Graham’s work on colour spaces, positioning OKLCH as a practical tool for dynamic, theme‑aware animations.
Sources: