Skip to content

rgbToHsl

Converts an RGB(A) color into HSL(A).

h/s/l are rounded to 1 decimal place to avoid floating-point noise.

Available since v3.0.0

import { rgbToHsl } from '@helpers4/color';
// or, from the all-in-one package (same code, one install):
import { rgbToHsl } from 'helpers4/color';
rgbToHsl(color: RgbColor): HslColor
ParameterTypeDescription
colorRgbColorThe color to convert. `r`/`g`/`b` are expected in 0-255, `a` defaults to 1 (opaque) when omitted.

HslColor — The equivalent HSL(A) color: h in 0-360, s/l in 0-100

Useful for generating tints/shades by adjusting lightness.

rgbToHsl({ r: 255, g: 0, b: 0 })
// => { h: 0, s: 100, l: 50, a: 1 }

When r, g, and b are equal, the color is achromatic (s = 0).

rgbToHsl({ r: 128, g: 128, b: 128 })
// => { h: 0, s: 0, l: 50.2, a: 1 }

An HSL(A) color with channels expressed as plain numbers.

interface HslColor {
  a?: number;
  h: number;
  l: number;
  s: number;
}

An RGB(A) color with channels expressed as plain numbers, convenient for further conversion or manipulation.

interface RgbColor {
  a?: number;
  b: number;
  g: number;
  r: number;
}

View source on GitHub