What is an HSL to Hex converter?
This tool converts a color expressed in the HSL model — Hue, Saturation and Lightness — into the hexadecimal notation used in CSS, design software and web development. HSL is intuitive for humans because hue picks the color on the wheel, saturation controls vividness and lightness controls how dark or bright it is. Hex (e.g. #3F7FBF) is the format browsers and tools actually consume.
How to use it
Enter the hue from 0 to 360 degrees, the saturation from 0 to 100 percent and the lightness from 0 to 100 percent, then read off the resulting hex code, the RGB channel values and a live color swatch. The conversion is universal and works for any color, with no software needed.
The formula explained
The conversion first finds the chroma \(C = (1 - |2L - 1|)\cdot S\), where S and L are fractions in 0–1. A helper \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) handles the gradient between primary colors, and a brightness offset \(m = L - \tfrac{C}{2}\) lifts the result to the right lightness. Depending on which 60° sector the hue falls in, the (R′,G′,B′) channels are assigned from C, X and 0. Each final channel is \(\text{round}((c' + m)\cdot 255)\), and the hex string is just the two-digit hexadecimal of R, G and B joined together. The full conversion is:
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
Worked example
For HSL(210, 50%, 50%): S = 0.5, L = 0.5, so \(C = (1 - |0|)\times 0.5 = 0.5\). \(H/60 = 3.5\), so \((3.5 \bmod 2) = 1.5\) and \(X = 0.5\times(1 - |0.5|) = 0.25\). \(m = 0.5 - 0.25 = 0.25\). Hue 210 is in sector 3 (180–240), giving (R′,G′,B′) = (0, X, C). So \(R = \text{round}(0.25\times 255) = 64\), \(G = \text{round}(0.5\times 255) = 128\), \(B = \text{round}(0.75\times 255) = 191\) → #4080BF.
FAQ
Does hue wrap around? Yes — a hue of 360 is the same red as 0, and the tool normalizes any value into 0–360.
Why might my channels look slightly off by one? Rounding to the nearest integer can shift a channel by ±1 versus other tools that truncate; rounding is the more accurate choice.
Is gray possible? Yes — set saturation to 0 and any hue, and all three channels equal \(\text{round}(L\times 255)\), producing a neutral gray.
