Converting HSL to RGB

Posted: 2025-11-05
Tags: Typography, CSS

The W3C provides code in the CSS Color Module Level 3¹.

• Psuedo-Code
• Javascript

Psuedo-Code

A 2011 version providess psuedo-code for HSL to RGB conversion:²

HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

Javascript

The current version provides a Javascript implementation:

function hslToRgb (hue, sat, light) {
      hue = hue % 360;

      if (hue < 0) {
          hue += 360;
      }

      sat /= 100;
      light /= 100;

      function f(n) {
          let k = (n + hue/30) % 12;
          let a = sat * Math.min(light, 1 - light);
          return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
      }

      return [f(0), f(8), f(4)];
  }