HSL to RGB

What is HSL?

HSL stands for Hue, Saturation, Lightness — a coordinate system designed to be readable by humans. Hue is an angle on the colour wheel from 0° to 360°: 0° is red, 120° green, 240° blue, and the wheel wraps back to red at 360°. Saturation is how colourful the result is, from 0% (a pure grey) to 100% (as vivid as the hue allows). Lightness runs from 0% (black) through 50% (the most saturated version of the hue) up to 100% (white). The format is the natural home for programmatic colour-scale generation and for colour theory — but most rendering APIs ultimately need RGB.

What is the rgb() function?

rgb() is the canonical CSS notation for an sRGB colour, written as three decimal channels from 0 to 255 — for example rgb(255, 0, 0) for pure red. Each channel represents the intensity of one additive primary: red, green or blue. It’s the form expected by canvas’s fillStyle, WebGL uniforms, most JavaScript colour libraries and any design-token system that stores channel values as integers. Converting an HSL colour you’ve reasoned about in a colour-theory tool into the rgb() triplet your code actually needs is the single most common reason to reach for this converter.

The conversion math

HSL maps to RGB through a piecewise function over six sextants of the colour wheel. Compute chroma C = (1 - |2L - 1|) × S (after normalising S and L to 0–1). Compute X = C × (1 - |((H/60) mod 2) - 1|) and a match value m = L - C/2. Six cases based on which sextant the hue lands in pick which permutation of (C, X, 0) becomes (R, G, B), then m is added to each. Multiply by 255 and round to the nearest integer. The result is three integers in the 0–255 range — exactly what the rgb() functional notation wants.

Use cases

Canvas and WebGL. Canvas’s fillStyle and strokeStyle accept either rgb() strings or numeric channel values. WebGL uniforms typically want three floats. Either way, you need integer or normalised RGB to draw, even if you reasoned about the colour in HSL.

Design systems and tokens. Token pipelines that store base colours in HSL (because tints and shades derive cleanly that way) need to emit RGB for runtime use in React Native, native iOS/Android or anything else that doesn’t accept hsl() directly.

JavaScript colour manipulation. Libraries like chroma.js, color and tinycolor accept HSL input but most game engines, image libraries and graphics APIs want rgb() triplets. This converter is the bridge.

Brand-scale generation. Generating a tint ramp in HSL (hue constant, lightness stepping from 95% to 10%) and then converting each step to rgb() for a generated design-token JSON file is a common build-step pattern.

Pitfalls

• % is required on saturation and lightness. hsl(210, 80, 45) is invalid CSS — every browser rejects it, and so does this converter, with a friendly inline note explaining what’s missing.
• HSL is not HSV. Photoshop and many design tools use HSV (the third channel is “value” / brightness, not “lightness”). Don’t paste HSV numbers into this converter expecting the same colour.
• HSL lightness is not perceptual. A lightness: 50% yellow is perceptually much brighter than a lightness: 50% blue. For perceptually-uniform conversions use OKLCH or HSLuv, both outside the scope of this landing.
• Greyscale hue is undefined. When saturation is 0%, hue has no effect — hsl(0, 0%, 50%) and hsl(240, 0%, 50%) both produce rgb(128, 128, 128). Don’t read meaning into the hue of a grey.
• Alpha not preserved. HSLA input loses its alpha here; use the Color Converter for alpha-aware output.

How to use this HSL to RGB converter

1. Paste your HSL value into the input. The parens, commas and deg unit are all optional; 210, 80%, 45% and hsl(210deg 80% 45%) both work.
2. The rgb(r, g, b) output and the colour swatch update live — no Convert button.
3. If the % symbols are missing or a value is out of range, a friendly inline note explains what to fix.
4. Tap Copy to put the rgb() string on your clipboard.

Privacy

The conversion is a small JavaScript function running in your browser tab. No server call, no logging, no analytics on your colour values. The page caches its bundle on first load and works fully offline thereafter.

Compatibility notes

The output uses standard CSS rgb() notation supported by every browser since the 1990s, in the comma-separated form (rgb(255, 0, 0)) that CSS linters accept by default. The modern slash-separated syntax (rgb(255 0 0 / 0.5)) is available in the Color Converter when you need it for alpha-aware modern CSS; this landing emits the classic form because it’s still the most widely compatible and what most pipelines expect.