Color Alpha Anywhere | CSS tricks

In my article “Different Degrees of Custom Property” I noticed a situation about colors and custom CSS properties where I went “too far” in dividing HSL color values. Breaking every single color into its H, S, and L parts can be a step too far.

But you probably do will divide it up like this:

html {
  --color-1-hsl: 200deg 15% 73%;
  --color-1: hsl(var(--color-1-hsl));
}

So two custom properties per. color in your color system. Why? For now you have a really easy way to use it and you have a way to apply alpha to the color if you want.

.card {
  background: var(--color-1);
}
.card-with-alpha {
  background: hsl(var(--color-1) / 0.5);
}

There’s not really any other way to take an existing color in CSS and apply alpha transparency to it. Well, I say that, but actually …

/* Future CSS! (works in Safari TP right now) */
.card-with-alpha {
  background: hsl(from var(--color-1) h s l / 0.5);
}

It’s nice, but I’m not sure when we can count on it in production.

Do you know what else we can not use for something super important in production? Houdini malerblade. No Firefox or Safari yet on them.

A skirt because Dave almost got this thing cracked! The insight here is that Houdini paint worksheets basically return an image that you paint with <canvas> APIs. You can paint a rectangle in canvas with any color format and then set globalAlpha, returns it as an image, and then it basically unlocks alpha in any color format! It works (in Chrome):

Dave threw the code on GitHub and blogged it. Of course, it also made a good video:

Like and subscribe.

But if you need a system like this for production, just perform the custom feature technique that I mentioned first.

An earlier version of this post was tweeted, but I’m blogging here because real bloggers blog.

Leave a Comment