Skip to content

Instantly share code, notes, and snippets.

@diogocapela

diogocapela/CSS-color-var.md

Forked from tunguskha/CSS-color-var.md
Created June 27, 2023 18:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diogocapela/4a47c5068d0426216a9dfca4ecead31b to your computer and use it in GitHub Desktop.
Save diogocapela/4a47c5068d0426216a9dfca4ecead31b to your computer and use it in GitHub Desktop.
Download ZIP
Darken & Lighten colors in pure CSS using variables.
Raw
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%));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment