0

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.

Ferit
  • 8,692
  • 8
  • 34
  • 59
  • 1
    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 May 04 '23 at 13:05
  • 1
    The format of hsla is hsla(H,S,L,A) - not hsla(hsl(H,S,L),A) – A Haworth May 04 '23 at 13:19

1 Answers1

2

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>
dantheman
  • 3,189
  • 2
  • 10
  • 18
  • 1
    _That works_? G'damn, I did not know that. That's cool. – somethinghere May 04 '23 at 13:14
  • Unbelievable. I wished it was that simple, and the wish became true. – Ferit May 04 '23 at 13:45
  • 1
    [CSS Color Module level 4, §7](https://www.w3.org/TR/css-color-4/#the-hsl-notation) 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. – David Thomas May 04 '23 at 14:15