HSL and HSLA

HSL describes an sRGB color through hue, saturation, and lightness. HSLA adds an alpha value for transparency. Its coordinates are convenient for picking a hue, but its lightness value does not measure perceived brightness.

For example, hsl(60, 100%, 50%) is yellow and hsl(240, 100%, 50%) is blue. They have the same HSL lightness, yet the yellow looks much brighter. Equal HSL lightness values do not imply equal text contrast.

Use HSL as an input

Espalier accepts hsl() seed colors and converts them to OKLCH for palette generation. See theming for configuration.

In CSS, relative color syntax performs the conversion before a lightness adjustment:

.card {
  --seed-hsl: hsl(200, 80%, 50%);
  background: oklch(from var(--seed-hsl) l c h);
}

.card:hover {
  background: oklch(from var(--seed-hsl) calc(l + 0.05) c h);
}

Use semantic tokens for ordinary component styling. Check contrast for custom colors; a lightness adjustment alone does not establish readability.