How is HSL converted to hex?

HSL is first converted to RGB. From lightness and saturation a chroma value is derived, an intermediate component is found from the hue sector, and a match-lightness offset is added. The three 0–255 channels are then each written as two hex digits and joined as #RRGGBB.

What do the HSL components mean?

Hue is the color angle from 0 to 360 degrees (0 red, 120 green, 240 blue). Saturation is how vivid the color is from 0 percent grey to 100 percent full. Lightness is how bright it is from 0 percent black to 100 percent white.

Why do 0 percent and 100 percent lightness ignore hue and saturation?

At 0 percent lightness the color is pure black and at 100 percent it is pure white, so the hue and saturation no longer have any visible effect. The converter returns #000000 or #ffffff accordingly.

Is HSL to hex lossless?

Converting HSL to RGB then to hex rounds each channel to the nearest integer 0–255, so very fine HSL differences can map to the same hex. The reverse trip may therefore not return the exact original HSL, but the visible color matches.

Is my color sent to a server?

No. The conversion is pure arithmetic that runs entirely in your browser. Nothing is uploaded.

HSL to Hex Converter

The HSL to hex converter turns hue, saturation, and lightness values into a standard CSS hex color. HSL is intuitive for picking colors — adjust the angle for the hue, then dial vividness and brightness — but most stylesheets, design tokens, and tools want a hex code.

How it works

HSL is converted to RGB first, then RGB is formatted as hex. The RGB step uses the standard algorithm:

Compute chroma C = (1 − |2L − 1|) × S, where L and S are in 0–1.
Find X = C × (1 − |(H / 60) mod 2 − 1|), picking the right intermediate component for the hue sector.
Choose the (R′,G′,B′) ordering based on which 60° sector the hue falls in.
Add the lightness match m = L − C/2 to each component, then scale by 255.

Each resulting channel (0–255) is written as a two-digit hex value and joined into #RRGGBB.

Example

Convert hsl(210, 70%, 50%):

Chroma C = (1 − |2·0.5 − 1|) × 0.70 = 0.70
Hue 210° is in the 180–240 sector, giving a blue-leaning mix
The result is approximately #2680d9, a medium blue

At 0% lightness the result is always #000000, and at 100% it is #ffffff, regardless of hue or saturation. All math runs locally in your browser — nothing is uploaded.