Calc with a multivalue css variable

Question

I want to make a hover effect over a p-tag, when hovered the background should get darker. I used filter:brightness(85%) but this made also the text darker. Here is my css.

:root {
 --my-color:193 55% 40%
}

p { 
 background-color:hsl(var(--my-color)); 
}

/* This rule is not working */
p:hover {
 background-color:hsl(calc(var(--my-color)[2] - 5%))); 
}

Is there a possibility to subtract 5% only of the last element of my css variable ? Or do i have to split my variable into hue, saturation and lightness and then use calc on lightness ?

Answer 1

Yes, you can achieve this by breaking down your HSL variable into its individual components and then using calc for the hover effect. In your case, since you want to reduce the lightness by 5%, you would need to split the HSL value into its components.

Here's how you can do it:

:root {
  --hue: 193;
  --saturation: 55%;
  --lightness: 40%;
}

p {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

p:hover {
  --new-lightness: calc(var(--lightness) - 5%);
  background-color: hsl(var(--hue), var(--saturation), var(--new-lightness));
}

This way, you're only modifying the --new-lightness variable on hover, keeping the other HSL components unchanged.

Alternatively, you could calculate the new lightness directly in the calc function within the hover rule, like this:

p:hover {
  background-color: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 5%));
}

Both approaches achieve the same result, so you can choose the one that fits your preference or coding style.

Answer 2

Change the Lightness

Define your HSL colour as three separate CSS variables (h,s and l) then change the local value of l on hover:

:root {
  --h: 193;
  --s: 55%;
  --l: 40%;
  --lhover: 35%; /* you could do calc(var(--l) - 5%) here but why bother? */
}

p {
  padding:1rem;
  background-color: hsl(var(--h), var(--s), var(--l));
}

p:hover {
  --l: var(--lhover);
}

<p>Example using lightness as a separate variable</p>

Update: CSS Color-mix

Alternatively you can use the new color-mix functional notation which

takes two values and returns the result of mixing them in a given colorspace by a given amount.

It is very well supported in modern browsers but you'll want a fallback if you need to support IE11 and other dinosaurs.

So in this example, the hsl color is defined as a CSS variable then on hover we apply the color-mix function to mix my-hsl with 10% black (using the sRGB colour-space because it works better in this example.)

:root {/* define your colours here */
  --my-color:hsl(193, 55%, 40%);
}

p {
  --bg-color: var(--my-color);/* default */
  padding:1rem;
  background-color: var(--bg-color);
}

p.example2 {
  --bg-color: pink;/* overwrite local var */
}

p:hover {/* make the bg darker */
  background-color: color-mix(in srgb, var(--bg-color), black 10%);
}

<p>Using CSS colour-mix</p>
<p class="example2">Example with a class-level --bg-color</p>
<p style="--bg-color: orange;">Example with a local --bg-color</p>

See MDN's article on Creating color palettes with the CSS color-mix() function for more info.