CSS Theme Generator Maths

theme.css

:root {
  --base-color: #444484;
  --highlight-base-color: #FA6E23;
  
  --base-color-h: var(--base-color); /* Extract hue from the base color */
  --base-color-l: var(--base-color); /* Extract lightness from the base color */
  --base-color-s: var(--base-color); /* Extract saturation from the base color */
	
  /* Adjust the step for lighter and darker shades */
  --lightness-step: 15;

  --color-light-1: hsl(var(--base-color-h), calc(var(--base-color-l) + var(--lightness-step) * 5%), calc(var(--base-color-s) - 10%));
  --color-light-2: hsl(var(--base-color-h), calc(var(--base-color-l) + var(--lightness-step) * 4%), calc(var(--base-color-s) - 5%));
  --color-light-3: hsl(var(--base-color-h), calc(var(--base-color-l) + var(--lightness-step) * 3%), calc(var(--base-color-s) - 2%));
  --color-light-4: hsl(var(--base-color-h), calc(var(--base-color-l) + var(--lightness-step) * 2%), calc(var(--base-color-s) - 1%));
  --color-light-5: hsl(var(--base-color-h), calc(var(--base-color-l) + var(--lightness-step) * 1%), calc(var(--base-color-s) - 0.5%));

  --color-dark-1: hsl(var(--base-color-h), calc(var(--base-color-l) - var(--lightness-step) * 5%), calc(var(--base-color-s) + 10%));
  --color-dark-2: hsl(var(--base-color-h), calc(var(--base-color-l) - var(--lightness-step) * 4%), calc(var(--base-color-s) + 5%));
  --color-dark-3: hsl(var(--base-color-h), calc(var(--base-color-l) - var(--lightness-step) * 3%), calc(var(--base-color-s) + 2%));
  --color-dark-4: hsl(var(--base-color-h), calc(var(--base-color-l) - var(--lightness-step) * 2%), calc(var(--base-color-s) + 1%));
  --color-dark-5: hsl(var(--base-color-h), calc(var(--base-color-l) - var(--lightness-step) * 1%), calc(var(--base-color-s) + 0.5%));
}

/* Usage example */
.button {
  background-color: var(--base-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-light {
  background-color: var(--color-light-3);
}

.button-dark {
  background-color: var(--color-dark-3);
}