Skip to content

Instantly share code, notes, and snippets.

@tunguskha

tunguskha/CSS-color-var.md

Last active May 27, 2021
Embed
What would you like to do?
Darken & Lighten colors in pure CSS using variables.
: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%));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment