hsl-theming.css

  /* hsl color palette can be adjusted on the fly & is derived from a single primary color */
  /* define your primary color from its h/s/l values */

  --primary-color-h: 196;
  --primary-color-s: 64%;
  --primary-color-l: 38%;

  --primary-color: hsl(
    var(--primary-color-h),
    var(--primary-color-s),
    var(--primary-color-l)
    );
  
  /* lighten */
  --primary-color--light: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 15%));

  /* darken */ 
  --primary-color--dark: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 15%));
  
  /* complement */
  --primary-color--complement: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));

  /* split complement */
  --primary-color--split-complement-1: hsl(calc(var(--primary-color-h) + 150), var(--primary-color-s), var(--primary-color-l);
  --primary-color--split-complement-2: hsl(calc(var(--primary-color-h) + 210), var(--primary-color-s), var(--primary-color-l);

  /* triadic */ 
  --primary-color--triada-1: hsl(calc(var(--primary-color-h) + 120), var(--primary-color-s), var(--primary-color-l));
  --primary-color--triada-2: hsl(calc(var(--primary-color-h) + 240), var(--primary-color-s), var(--primary-color-l));

  /* tetratic (double complementary) */
  --primary-color--tetra-1: hsl(calc(var(--primary-color-h) - 30), var(--primary-color-s), var(--primary-color-l));
  --primary-color--tetra-2: hsl(calc(var(--primary-color-h) + 150), var(--primary-color-s), var(--primary-color-l));
  --primary-color--tetra-3: hsl(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l));

  /* analogous */
  --degree: 15;
  --primary-color--analogous-1: hsl( 
    calc(var(--primary-color-h) + var(--degree)), 
    var(--primary-color-s), 
    var(--primary-color-l)
  );
  --primary-color--analogous-2: hsl( 
    calc(var(--primary-color-h) - var(--degree)), 
    var(--primary-color-s), 
    var(--primary-color-l)
  );