RGB to HSL

OSCC · JavaScript, Math · Oct 4, 2020

Converts a RGB color tuple to HSL format.

  • Use the RGB to HSL conversion formula to convert to the appropriate format.
  • The range of all input parameters is [0, 255].
  • The range of the resulting values is H: [0, 360], S: [0, 100], L: [0, 100].
const RGBToHSL = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
      ? 2 + (b - r) / s
      : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2,
  ];
};
RGBToHSL(45, 23, 11); // [21.17647, 60.71428, 10.98039]

Recommended snippets & collections

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

  • HSL to RGB

    JavaScript, Math

    Converts a HSL color tuple to RGB 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.