HSL Color palette

:root {
  --primary-color-h: 156;
  --primary-color-s: 50%;
  --primary-color-l: 50%;
  --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));

  /* triad */ 
  --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));

  /* 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)
  );
}