Darken & Lighten colors in pure CSS using variables.

CSS-color-var.md

:root {
  /* Base color using HSL */
  --hue: 207;
  --saturation: 64%;
  --light: 44%;
  
  /* Base color in variable */
  --primary-color: hsl(var(--hue), var(--saturation), var(--light));
  /* Base color lighten using calc */
  --primary-color-lighten: hsl(var(--hue), var(--saturation), calc(var(--light) + 10%));
  /* Base color darken using calc */
  --primary-color-darken: hsl(var(--hue), var(--saturation), calc(var(--light) - 10%));
}