Live CSS Colors: What You Can Safely Use | That HTML Blog
February 7, 2025
One of the most exciting developments in Modern™ CSS is the ability to generate new colors in real-time programmatically based on variables or the currentColor keyword. However, there are two separate ways to modify or derive colors, each with its own set of goals and syntax, and the confusing thing about them is they have rolled out at different paces.
The first method you should know about is color-mix. It’s one I’ve been using for some time now, and it was the first one which became widely available in 2023. Can I Use reports 91.93% support which is quite impressive.The second method is newer, called Relative Color syntax. This syntax has rolled out in a more incremental fashion, and if you’re looking for currentColor support in particular (more on that in a moment), Can I Use reports only 77.53% support which in my opinion means it’s not quite ready for widespread production use.
Source: Live CSS Colors: What You Can Safely Use | That HTML Blog
Color in CSS is an increasingly vast sophisticated set of properties, values, functions, types, @rules…
From humble beginnings with just solid colors in an RGB color space, (I can’t quite recall but my memory is transparency via alpha channels came later) we now have a literally overwhelming set of features.
One thing we can do now is ‘generate new colors in real-time programmatically based on variables or the currentColor keyword.’ As Jared White details here.
