diogocapela/CSS-color-var.md

Forked from tunguskha/CSS-color-var.md

Created June 27, 2023 18:52

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/diogocapela/4a47c5068d0426216a9dfca4ecead31b.js"></script>
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%));
}