hsl() with CSS variables? 🚒

Peek-a-boo, sorry I got caught up in a toddler moment.

Everyone is talking about how to create a theme with CSS variables, although to me this is just the tip of the ice burg I thought short and hard about how this idea of dynamic theming could be taken up a notch.

Do you ever use hue, saturation, lightness alpha in your CSS? hala() in my entire career has only appeared once, and that was when a very excited Chris Coyier (big fan) wrote about the subject early last year CSS Tricks post.

I thought, "it's nice but more cognitive load to manage all those colors. Plus I'm kind of used to writing rgba". You can't deny that rgba does produce colors.

I have come to realize from recent posts that when you want to create a pallette, you could go to a pallette tool and get 5 colors and not know what to do with them, because those 5 colours are not absolute, you are meant to modify the hue, saturation, lightness to fit the situation, not take them as goapal.

As CSS variables (custom properties for all the righteous name crusaders out there) are a thing, and so it's reasonable to assume that not only could you change the theme from red to blue, such transition much hue! The potential goes further as you could lighten your theme or even greyscale it a touch.

.all-The_Things {
   background-color: hsl(var(--rainbow), var(--depresion), var(--sunglasses));
}

Yet another philosophical post. Enjoy your evening, until next time, outro text here... Love you all ♥️