Andy Clarke's latest Smashing Magazine tutorial solves a real production problem: manually rebuilding colour palettes every time a foundation colour changes. His site's blog header already shifts colours from morning to night, and a snow mode rewrites the entire theme via overlay blending. The question driving this piece is whether CSS relative colour values can replace that manual work entirely.
The answer is yes, but the implementation detail is what makes this worth reading in full. Clarke works in OKLCH, and he draws a hard line between absolute and proportional colour adjustments. Absolute calc operations like calc(c - 0.10) collapse towards grey the moment you swap the foundation colour. Proportional multiplication preserves the relationship between palette members regardless of what the foundation is. That distinction is the core of his system, and it is demonstrated with specific OKLCH values: a foundation lightness of 0.7837, a dark variant at 0.5837, chroma starting at 0.1035, hue offsets of 60 degrees.
Browser support for OKLCH is now widespread per caniuse.com. Design tools including Sketch have not caught up, but Clarke shows that browsers will convert Hex, HSL, and RGB into OKLCH automatically, meaning you can define your foundation colour in any space and derive the full palette from it in CSS custom properties. Ahmad Shadeed's interactive guide on relative colour and Geoff Graham's 2023 Smashing piece on OKLCH colour spaces are cited as essential background reading.
[READ ORIGINAL →]