🎨
HSL colors have components h/hue, s/saturation,
l/lightness, and a/alpha.
HSL was created in the 1970s to approximate human perception
of color, trading accuracy for simpler computations. It's
not perceptually uniform, so colors with the same lightness
can appear darker or lighter, depending on their hue
and saturation. Yet, the lightness and saturation values that
correspond to gamut limits are always 100, regardless of the
hue. This can make HSL easier to work with than OKLCH.
HSL colors are mapped to the full P3 gamut when
using the "display-p3" color space.
hue: 0 to 360
saturation: 0 to 100
lightness: 0 to 100
alpha: 0 to 1
Example
awaitCanvas(200, 100);
colorMode(HSL);
background(0, 100, 50);
Example
awaitCanvas(200, 220); noStroke();
colorMode(HSL); for (leth = 0; h < 360; h += 10) { for (letl = 0; l <= 100; l += 10) { fill(h, 100, l); rect(h * (11 / 20) - 100, l * 2 - 110, 6, 20); } }
🎨 HSL colors have components
h/hue,s/saturation,l/lightness, anda/alpha.HSL was created in the 1970s to approximate human perception of color, trading accuracy for simpler computations. It's not perceptually uniform, so colors with the same lightness can appear darker or lighter, depending on their hue and saturation. Yet, the lightness and saturation values that correspond to gamut limits are always 100, regardless of the hue. This can make HSL easier to work with than OKLCH.
HSL colors are mapped to the full P3 gamut when using the "display-p3" color space.
hue: 0 to 360saturation: 0 to 100lightness: 0 to 100alpha: 0 to 1