Calc with a multivalue css variable [duplicate]

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 ?

variables are not an array and youc an not calc with just one part of a variable. You have to use the hsl with 3 variables and then you can caulcatle with just one of those 3 — tacoshy
– tacoshy, Commented Nov 22, 2023 at 12:39

Moob · Accepted Answer · 2024-04-02 16:17:22Z

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.

Collectives™ on Stack Overflow

Calc with a multivalue css variable [duplicate]

1 Answer 1

Update: CSS Color-mix

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update: CSS Color-mix

Comments

Linked

Related