Color & design

How to Convert HSL to HEX with Worked Color Calculations

Convert HSL hue, saturation and lightness into HEX using a worked example, gray and boundary cases, explicit rounding and verified converter input limits.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

HSL describes a color through hue, saturation and lightness. To produce a six-digit HEX value, first calculate the corresponding red, green and blue channels, round them to bytes and encode each byte in hexadecimal. For hsl(210, 50%, 40%), the result is RGB 51, 102, 153, or #336699.

Keep the three input scales distinct

Hue is an angle. Saturation and lightness are percentages. In the worked example, convert saturation to 0.5 and lightness to 0.4 for the arithmetic. Do not interpret 40% lightness as a channel value of forty, and do not divide the hue by one hundred as though it were another percentage.

The local converter wraps hue around a full 360-degree turn. Thus 480 degrees follows the same direction as 120 degrees. Saturation and lightness must each remain between zero and 100 percent. A value above 100 is rejected by this tool rather than treated as a request for an unspecified stronger color.

Calculate the example in stages

Let H be the normalized hue angle, S the saturation fraction and L the lightness fraction. The chroma is C = (1 − |2L − 1|) × S. The intermediate component is X = C × (1 − |((H / 60) mod 2) − 1|), and the offset is m = L − C / 2.

Quantity	For H = 210, S = 0.5, L = 0.4
C	(1 − \|0.8 − 1\|) × 0.5 = 0.4
X	0.4 × (1 − \|1.5 − 1\|) = 0.2
m	0.4 − 0.2 = 0.2

Hue 210 lies in the 180-to-240-degree sector, whose preliminary RGB components are 0, X and C. Add m to each to obtain 0.2, 0.4 and 0.6. Multiplying by 255 gives 51, 102 and 153. Their hexadecimal pairs are 33, 66 and 99, producing #336699.

For other hues, choose the preliminary components from the matching sector below. Include each lower boundary and exclude its upper boundary after normalizing H into the range from zero up to 360. Then add m and multiply by 255 in the same way.

Hue sector	Preliminary red, green, blue
0 to 60	C, X, 0
60 to 120	X, C, 0
120 to 180	0, C, X
180 to 240	0, X, C
240 to 300	X, 0, C
300 to 360	C, 0, X

Verify the calculation in the converter

Open HSL to HEX, select HSL → HEX and enter 210, 50%, 40%. Check both the HEX and RGB lines against the values above. Then enter 480, 100%, 50%; the wrapped hue produces pure green, #00ff00, with RGB 0, 255, 0.

The interface accepts three comma-separated components, optionally wrapped in hsl(...). Percent signs are optional on saturation and lightness in this tool's input. It does not accept an alpha component or every alternative CSS color syntax. Copy only the HEX value if the destination expects a single hash-prefixed code, because the Copy action returns the labeled conversion block.

Use gray and endpoint cases to check the algorithm

When saturation is zero, the hue does not affect the result. At 50% lightness, all three unrounded byte values are 127.5, which this converter rounds to 128, giving #808080. At zero lightness the result is black; at 100% it is white. These cases catch divide-by-zero or uninitialized-hue mistakes in an implementation.

Test two different hues with zero saturation and confirm that they produce the same gray. Then restore nonzero saturation and check that changing hue changes the result. A preview that stays fixed while the numeric channels change indicates a rendering problem, not an HSL arithmetic rule.

Understand the limits of a reverse conversion

Six-digit HEX stores integer channels, so rounding can lose information from fractional HSL input. Converting the rounded HEX back to HSL may yield slightly different displayed percentages or an arbitrary hue for gray. Compare the resulting RGB bytes when checking a round trip; do not demand identical original HSL text when quantization or an undefined gray hue is involved.

Syntax reference

The CSS color reference covers the broader notation used for HSL and other CSS colors.