hsl2rgb: HSL to RGB Color Space Conversion

Mathematical Color Space Transformation

The HSL to RGB conversion transforms cylindrical color space coordinates to Cartesian RGB values. HSL represents colors through hue (angular position), saturation (radial distance), and lightness (vertical position) in a double cone model.

The transformation follows the mathematical relationship:

For a given HSL triplet $(h, s, l)$ where $h \in [0, 1]$, $s \in [0, 1]$, $l \in [0, 1]$:

$C = s \cdot (1 - |2l - 1|)$

$\text{RGB} = (\text{hue2rgb}(h) - 0.5) \cdot C + l$

The hue2rgb function maps hue values to RGB components using:

$R = \text{saturate}(|6h - 3| - 1)$ $G = \text{saturate}(2 - |6h - 2|)$ $B = \text{saturate}(2 - |6h - 4|)$

This creates a hexagonal projection from the hue circle to RGB space, where each 60° segment corresponds to transitions between primary and secondary colors.

Live Editor

const fragment = () => {
      const t = iTime.mul(0.3)
      const hue = uv.x.add(t).fract()
      const sat = uv.y.mul(0.8).add(0.2)
      const lightness = float(0.6)
      const color = hsl2rgb(vec3(hue, sat, lightness))
      return vec4(color, 1)
}

Result

Loading...