Generate customizable CSS variables for a color palette, with override-able HSL components.
For each shade of a color, we want to generate four variables:
One for each HSL component of the color (Hue, Saturation, Lightness).
A valid HSL color value combining the three components.
A shade’s HSL components need to be derived from the reference color’s HSL components,
so site implementers can change all shades of a color at once by setting the HSL components of the "reference" color.
For example, for a "light red" color derived from "red", this will create:
--red-light-hue: var(--red-hue);
--red-light-saturation: var(--red-saturation + 15%);
--red-light-lightness: calc(var(--red-lightness) - 5%);
--red-light: hsl(var(--red-light-hue) var(--red-light-saturation) var(--red-light-lightness));
For the red reference color defined as hsl(66 50% 25%), this will create:
--red-hue: 66;
--red-saturation: 50%;
--red-lightness: 25%;
--red: hsl(var(--red-hue) var(--red-saturation) var(--red-lightness));
Generate customizable CSS variables for a color palette, with override-able HSL components.
For each shade of a color, we want to generate four variables:
A shade’s HSL components need to be derived from the reference color’s HSL components, so site implementers can change all shades of a color at once by setting the HSL components of the "reference" color.
For example, for a "light red" color derived from "red", this will create: --red-light-hue: var(--red-hue); --red-light-saturation: var(--red-saturation + 15%); --red-light-lightness: calc(var(--red-lightness) - 5%); --red-light: hsl(var(--red-light-hue) var(--red-light-saturation) var(--red-light-lightness));
For the red reference color defined as
hsl(66 50% 25%), this will create: --red-hue: 66; --red-saturation: 50%; --red-lightness: 25%; --red: hsl(var(--red-hue) var(--red-saturation) var(--red-lightness));