CSS: Using hsl variable in hsla?

Question

Say I have a CSS variable for an hsl defined as such:

--white-1: hsl(0deg 0% 100%);

Now, I want to use that same white, but at 50% opacity. So, something like this:

--white-2: hsla(0deg 0% 100% 50%);

Is there a way to use the first variable --white-1 in the definition of the variable --white-2? I guess I want to do something like this:

--white-2: hsla(var(--white-1) 50%);

Is there a way to achieve this in CSS?

it should be noted that hsla() will become obsolete. hsl() accept a fourth argument for the opacity hsl(0deg 0% 100% / 50%) — Temani Afif
– Temani Afif, Commented Nov 17, 2021 at 13:51

Temani Afif · Accepted Answer · 2025-07-13 09:32:51Z

8

You can do it using Relative Colors:

:root {
    --white-1: hsl(0deg 0% 100%);
    --white-2: hsl(from var(--white-1) h s l / 50%);  
}

edited Jul 13 at 9:32

answered Nov 17, 2021 at 13:46

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

Comments

Schwarz Developing · Accepted Answer · 2021-11-17 14:07:16Z

2

I would solve it like that

:root {
    --white-1: 0deg, 0%, 100%;
    --white-2: var(--white-1), 0.5; 
}

.wrapper{
  background: linear-gradient(90deg, rgba(155,194,89,1) 0%, rgba(194,166,89,1) 15%, rgba(89,179,194,1) 50%, rgba(155,194,89,1) 85%, rgba(194,89,183,1) 100%);
  padding: 3rem;
}

.div-1 {
    background: hsl(var(--white-1));
    width: 100px;
    height: 100px;
    margin: 1rem;
}

.div-2 {
    background: hsla(var(--white-2));
    width: 100px;
    height: 100px;
    margin: 1rem;
}

<div class="wrapper">
  <div class="div-1">--white-1</div>
  <div class="div-2">--white-2</div>
</div>

answered Nov 17, 2021 at 14:07

Schwarz Developing

2911 silver badge8 bronze badges

Collectives™ on Stack Overflow

CSS: Using hsl variable in hsla?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related