Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥 .success { --c: green; } aside { background: oklch(from var(--c) calc(l * 0.75) c h / 0.5); color: oklch(from var(--c) calc(l * 1.5) c h); } Magic! ✨

Here's the @CodePen link! 🚀 Firefox doesn't support relative color syntax... yet. You can get a similar behavior using color-mix though! 🔥 aside { background: color-mix( in oklch, var(--c) 50%, oklch(0% 0 0 / 50%) ); }

holy shit this is so much easier than the manual alternative of having a variant for each scale

Totally! 💯 This one was quickly thrown together too so its a little rough around the edges 😅 The technique holds though 🙌 Definitely gonna spend some more time with it for some upcoming projects

This.. combined with Tailwind v4 variables will be superb 👌 Thanks for sharing such a clever method

Oh yes! Magical ✨💯 Firefox doesn't support the relative color syntax yet. But does support color-mix which allows you to create a pretty similar set of behaviors 🙌

Oklch is so good for this use case cc @CipolleschiR @jamonholmgren

Someone drop the tailwind

Hey, bro. Can you tell me how you made this smooth video?

Very nice 👌

This is neat!