Color Alpha Anywhere

In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts is may be a step too far.

But you probably do want to split 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? Because now you’ve got a really easy way to use it and you’ve got a way to apply alpha to the color if you want.

.card {
  background: var(--color-1);
}
.card-with-alpha {
  background: hsl(var(--color-1-hsl) / 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);
}

That’s neat, but I’m not entirely sure when we’ll be able to rely on that in production.

You know what else we can’t use for anything super important in production? Houdini paint worklets. No Firefox or Safari yet on those.

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

Dave chucked the code on GitHub and blogged it. Of course, it made a good video as well:

Like and subscribe.

But if you need a system like this on production, just do the custom properties technique I listed first.

A previous version of this post was tweetbombed, but I’m blogging it here because real bloggers blog.

Comments

diondiondion

# November 15, 2021

I was surprised to see no mention of the color-mod() function that was supposed to be coming to CSS.

So I looked it up and learned that it was removed from the CSS Color Level 4 spec. :-(

That would’ve made it much simpler to apply transparency or other tweaks to any existing color.

It’s one of my most anticipated CSS features, hope it makes its way back into the specs sooner rather than later.

But until then, the hsl(from ...) workaround will do the trick, too, I guess.

Chris Coyier

Permalink to comment# November 16, 2021

That would’ve made it much simpler to apply transparency or other tweaks to any existing color.

I think the vibe is that the from ... syntax can do what color-mod() could do except is more flexible? Not sure.

Kaspars Z

# November 16, 2021

You can use rgba to apply alpha too and it works in all modern browsers

:root {
    --color-rgb: 255 122 24;
}

.element {
    background: rgba(var(--color-rgb), 0.25);
}

Of course this is not convenient to write colors like that in CSS, but if you use SASS then you can split color into its components using:

$color: #ff7a18;

:root {
    --color-rgb: #{ red($color) } #{ green($color) } #{ blue($color) };
}

.element {
    background: rgba(var(--color-rgb), 0.25);
}

Glenn

Permalink to comment# November 16, 2021
Came here to mention that. If we’re going the SASS route the above can be simplified to:
```
$color: $ff7a18;
.element {
  background: rgba($color, 0.25);
}
```
We use that pattern on a lot of sites. It’d be a bit weird to me to mix variables like that but I guess if you wanted to change the value of --color-rgb on the fly that could be a useful use-case.

Joy

# November 17, 2021

If only using it for backgrounds, you can construct a gradient with transparent to apply transparency to a color. The trick is to extend the gradient line very far.

Suppose you want 0.25 alpha at the top and 0.35 at the bottom. That’s a change of 0.1 in the visible range of the gradient, which is denoted syntactically by 100%. The total gradient line would be
100/x = 0.1 so x=1000
That gives you
background: linear-gradient(to bottom, transparent -250%, var(--color-rgb) 650%);
so the entire gradient line is 1000, but you only see from 0 to 100. It’s like moving the “0 to 100” box to the correct portion of the total to get the alpha you want.

Comments

Leave a Reply Cancel reply