Function Signature

js

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

Parameters

h (number): Hue, in degrees (0–360).
s (number): Saturation, as a percentage (0–100).
l (number): Lightness, as a percentage (0–100).

Return Value

An object containing the red (r), green (g), and blue (b) components as integers (0–255).

js

hslToRgb(24, 100, 50);
// { r: 255, g: 102, b: 0 }

hslToRgb(200, 100, 50);
// { r: 0, g: 170, b: 255 }

hslToRgb(0, 0, 100);
// { r: 255, g: 255, b: 255 }

hslToRgb(0, 0, 0);
// { r: 0, g: 0, b: 0 }

Conversion Details

When saturation is 0, the result is a grayscale color (r = g = b = lightness).
Uses a helper function hue2rgb to calculate channel values based on hue position.
Hue wraps around cyclically; values outside 0–360 are effectively normalized.

Examples

js

// Convert light green
console.log(hslToRgb(120, 60, 70));
// { r: 153, g: 242, b: 153 }

// Convert deep purple
console.log(hslToRgb(280, 80, 40));
// { r: 122, g: 20, b: 163 }

Usage Notes

Hue is expressed in degrees but internally normalized to 0–1 for computation.
Saturation and lightness are percentages; they are internally converted to 0–1 fractions.
Commonly used in UI color manipulation and dynamic styling systems.