Function Signature

js

rgbToHsl(r: number, g: number, b: number): { h: number, s: number, l: number }

Parameters

r (number): Red channel value (0–255).
g (number): Green channel value (0–255).
b (number): Blue channel value (0–255).

Return Value

An object containing the converted HSL values:

js

{ h: number, s: number, l: number }

Examples

js

rgbToHsl(255, 102, 0);
// { h: 24, s: 100, l: 50 }

rgbToHsl(0, 170, 255);
// { h: 200, s: 100, l: 50 }

rgbToHsl(255, 255, 255);
// { h: 0, s: 0, l: 100 }

rgbToHsl(0, 0, 0);
// { h: 0, s: 0, l: 0 }

Conversion Details

Hue (h) is determined by the dominant channel and expressed in degrees (0–360).
Saturation (s) represents the intensity of the color relative to its lightness.
Lightness (l) is the average of the maximum and minimum RGB values, scaled to 0–100.

Usage Notes

Neutral colors (gray tones) always return s = 0.
Lightness is 0 for black and 100 for white.
Commonly used when adjusting colors in design systems (e.g., lighten/darken operations).