HSL to RGB

OSCC · JavaScript, Math · Oct 4, 2020

Converts a HSL color tuple to RGB format.

  • Use the HSL to RGB conversion formula to convert to the appropriate format.
  • The range of the input parameters is H: [0, 360], S: [0, 100], L: [0, 100].
  • The range of all output values is [0, 255].
const HSLToRGB = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};
HSLToRGB(13, 100, 11); // [56.1, 12.155, 0]

Recommended snippets & collections

  • Working with color in JavaScript requires some understanding of color formats and conversions. Luckily, this snippet collection's got you covered.

  • RGB to HSL

    JavaScript, Math

    Converts a RGB color tuple to HSL format.

  • HSB to RGB

    JavaScript, Math

    Converts a HSB color tuple to RGB format.

  • RGB to HSB

    JavaScript, Math

    Converts a RGB color tuple to HSB format.