CODEWITHSUNDEEP
cssfilterhslpure-css
sankiago
sankiago

Reputation: 89

how to override hsl lightness with pure css

I have a nav wrapped by a header

<header>
 <nav></nav>
<header>

With these styles

header {
    background-color: hsl(180, 90%, 35%);
  }

  nav {
    background-color: hsl(180,80%,25%);
  }

The nav color is the header color but darker

I'd like to change the header color but header color wont change I've thinked of it

header {
    background-color: hsl(180, 90%, 35%);
  }

  nav {
    background-color: hsl(inherit,80%,25%); /*Obviusly it doesnt work*/
  }

or maybe use filter

 nav{
      backdrop-filter: saturate(88,8%)/*cause 88,8% of 90% is 80%*/ lightness(71,4%) /*lightness property doesnt exist*/ ;
 }

I guess I could use variables but I would like to know if is there a way to override or modify lightness (i think brigthness property is not the same)

Upvotes: 0

Views: 296

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

You could use a CSS variable

header {
  --colorAngle: 180;
  background-color: hsl(var(--colorAngle), 90%, 35%);

}

header.other{
  --colorAngle: 95;
}

header nav {
  background-color: hsl(var(--colorAngle), 80%, 25%);
}
<header>
  a
  <nav>b</nav>
  c
</header>
<hr />
<header class="other">
  a
  <nav>b</nav>
  c
</header>

Upvotes: 0

Related Questions