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

13 min readAnimation,

CSS,

DesignCSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics.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.View this animated SVG on my website. (Large preview)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.Snow mode allows my pioneer town background to adapt throughout the day. (Large preview)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.Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSSSmashing Animations Part 2: How CSS Masking Can Add An Extra DimensionSmashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not DeadSmashing Animations Part 4: Optimising SVGsSmashing Animations Part 5: Building Adaptive SVGs With <symbol>, <use>, And CSS Media QueriesSmashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom PropertiesSmashing Animations Part 7: Recreating Toon Text With CSS And SVGHow Cartoon Animation Taught Me To Reuse EverythingThe 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.The Yogi Bear Show, copyright Warner Bros. Entertainment Inc. (Large preview)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.The problem With Manually Updating Colour PalettesLet’s get straight to my challenge. In Toon Titles like this one — based on the 1959 Yogi Bear Show episode “Lullabye-Bye Bear” — and my work generally, palettes are limited to a select few colours.View this on my Toon Titles website. (Large preview)I create shades and tints from what I call my “foundation” colour to expand the palette without adding more hues.Colour palette with shades and tints of a foundation colour. (Large preview)In Sketch, I work in the HSL colour space, so this process involves increasing or decreasing the lightness value of my foundation colour. Honestly, it’s not an arduous task — but choosing a different foundation colour requires creating a whole new set of shades and tints. Doing that manually, again and again, quickly becomes laborious.Shades and tints of a different foundation colour. (Large preview)I mentioned the HSL — H (hue), S (saturation), and L (lightness) — colour space, but that’s just one of several ways to describe colour.RGB — R (red), G (green), B (blue) — is probably the most familiar, at least in its Hex form.There’s also LAB — L (lightness), A (green–red), B (blue–yellow) — and the newer, but now widely supported LCH — L (lightness), C (chroma), H (hue) — model in its OKLCH form. With LCH — specifically OKLCH in CSS — I can adjust the lightness value of my foundation colour.Lightness changes to my foundation colour. Chroma and Hue remain the same. (Large preview)Or I can alter its chroma. LCH chroma and HSL saturation both describe the intensity or richness of a colour, but they do so in different ways. LCH gives me a wider range and more predictable blending between colours.Chroma changes to my foundation colour. Lightness and Hue remain the same. (Large preview)I can also alter the hue to create a palette of colours that share the same lightness and chroma values. In both HSL and LCH, the hue spectrum starts at red, moves through green and blue, and returns to red.Hue changes to my foundation colour. Lightness and Chrome remain the same. (Large preview)Why OKLCH Changed How I Think About ColourBrowser support for the OKLCH colour space is now widespread, even if design tools — including Sketch — haven’t caught up. Fortunately, that shouldn’t stop you from using OKLCH. Browsers will happily convert Hex, HSL, LAB, and RGB values into OKLCH for you. You can define a CSS custom property with a foundation colour in any space, including Hex:/* Foundation colour */