How to change alpha of an HSL color if the color comes from a CSS custom property? [duplicate]

Question

I have a list of HSL colors coded as CSS custom properties and I want to manipulate their alpha channel.

What I have tried:

:root {
  --color: hsl(25, 33%, 93%);
}

.test { box-shadow: ... hsla(var(--color), 1); }

In the web browser debugger, checking the styles tab, I observed that the CSS rule is valid as it was not marked as invalid. However, switching to the computed tab and expanding the box-shadow, shows that the computed result is none. So this CSS syntax seems to be correct, but it appears that browsers (Chrome 112 and Firefox 112) are not rendering it.

What can I do to add an alpha channel to HSL colors coded as CSS custom properties?

P.S. There is this messy SASS solution, but I wish not to use it because it requires too much boilerplate.

I don't think this is supported yet by CSS. A color cannot be mixed or mapped with another color, unless you define the individual parts separately and insert their values. There is something like that in the works in standards, but for now, no, you cannot. — somethinghere
– somethinghere, Commented May 4, 2023 at 13:05
The format of hsla is hsla(H,S,L,A) - not hsla(hsl(H,S,L),A) — A Haworth
– A Haworth, Commented May 4, 2023 at 13:19

dantheman · Accepted Answer · 2023-05-04 13:12:24Z

5

Yes you can by using hsla and removing the brackets from the variable.

:root {
  --green: 120, 100%, 50%;
}

.box {
  width: 100px;
  height: 100px;
  background: hsla(var(--green), 0.5)
}

<div class="box"></div>

answered May 4, 2023 at 13:12

dantheman

3,8642 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

somethinghere Over a year ago

That works? G'damn, I did not know that. That's cool.

Ferit Over a year ago

Unbelievable. I wished it was that simple, and the wish became true.

David Thomas Over a year ago

CSS Color Module level 4, §7 allows for: --green: 120deg 100% 50%, and hsl(var(--green) / 0.5) (which is much nicer, imho). Specifying deg for the 120 isn't necessary, that's just my own preference to be explicit.

Collectives™ on Stack Overflow

How to change alpha of an HSL color if the color comes from a CSS custom property? [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related