PostHole
Compose Login
You are browsing us.zone2 in read-only mode. Log in to participate.
rss-bridge 2026-01-14T10:00:00+00:00

Smashing Animations Part 8: Theming Animations Using CSS Relative Colour

CSS 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.

  • Andy Clarke
  • Jan 14, 2026
  • 0 comments

Smashing Animations Part 8: Theming Animations Using CSS Relative Colour

  • 13 min read
  • Animation,

CSS,
Design

About The Author

Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative …
More about
Andy ↬

*Weekly tips on front-end & UX.
Trusted by 182,000+ folks.*

CSS 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.

[Graphics from Andy’s website]

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 applied to the town background]

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 CSS
  • Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension
  • Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead
  • Smashing Animations Part 4: Optimising SVGs
  • Smashing Animations Part 5: Building Adaptive SVGs With <symbol>, <use>, And CSS Media Queries
  • Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties
  • Smashing Animations Part 7: Recreating Toon Text With CSS And SVG

How Cartoon Animation Taught Me To Reuse Everything

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 in the Yogi Bear Show]

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 Palettes

Let’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.

[Illustration of Yogi Bear asleep in a hammock tied between two thin, white trees. Andy Clarke’s Toon Titles is displayed above Yogi in cartoon-style typography.]

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 of a foundation colour]

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.]

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 the 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 the foundation colour]

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 the foundation colour.]

Hue changes to my foundation colour. Lightness and Chrome remain the same. (Large preview)

Why OKLCH Changed How I Think About Colour

Browser 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 */
--foundation: #5accd6;

Any colours derived from it will be converted into OKLCH automatically:

--foundation-light: oklch(from var(--foundation) [...]; }
--foundation-mid: oklch(from var(--foundation) [...]; }
--foundation-dark: oklch(from var(--foundation) [...]; }

Relative Colour As A Design System

Think of relative colour as saying: “Take this colour, tweak it, then give me the result.” There are two ways to adjust a colour: absolute changes and proportional changes. They look similar in code, but behave very differently once you start swapping foundation colours. Understanding that difference is what can turn using relative colour into a system.

/* Foundation colour */
--foundation: #5accd6;

For example, the lightness value of my foundation colour is 0.7837, while a darker version has a value of 0.5837. To calculate the difference, I subtract the lower value from the higher one and apply the result using a calc() function:

--foundation-dark:
oklch(from var(--foundation)
calc(l - 0.20) c h);

To achieve a lighter colour, I add the difference instead:

--foundation-light:
oklch(from var(--foundation)
calc(l + 0.10) c h);

[...]

Original source

Reply