hsl() - native CSS lighten/darken/rgba

Browser support is 95%+.

hsl syntax

:root {
  --accent-primary: hsl(0 80% 50% / 25%);
}

Change color

.darkened {
  color: hsl(from var(--accent-primary) h s calc(l - 15));
}

Change color and opacity

.lightened {
  color: hsl(from var(--accent-primary) h s calc(l + 15) / 0.1);
}

⚠️ Attention: s and l are percents in hsl syntax, but in the hsl() function with calc() they are used as absolute values - without % sign.

---

Source: MDN.