How HSL Relates to HEX
HSL and HEX are two different languages for the same underlying colour space — sRGB. HSL (hue, saturation, lightness) was built for human reasoning. You twist the hue knob to change the colour family, adjust saturation to make it more or less vivid, and move lightness up to go toward white or down toward black. The model preserves perceptual relationships: raising lightness alone keeps the exact same hue, which is why designers use HSL for palette generation and theme systems.
HEX, on the other hand, is a shorthand for RGB — three pairs of hexadecimal digits representing red, green, and blue intensity, each from 0 to 255. The conversion between HSL and RGB, and from RGB to HEX, is fully deterministic and lossless within the sRGB gamut. That means every valid HSL triplet maps to exactly one RGB triplet, and then to exactly one six‑digit HEX code (plus an optional three‑digit shorthand when each channel’s value can be doubled). There is no rounding step that could produce a different colour, unlike conversions involving CMYK or LAB, which may adjust out‑of‑gamut values.
The page exists precisely because this transformation, though mathematically straightforward, is tedious and error‑prone by hand. A designer works in HSL because it feels natural; a developer needs HEX because that is what CSS expects. The tool bridges that gap instantly and without ambiguity.
Using the HSL‑to‑HEX Tool
You supply three values: a hue integer from 0 to 360 (measured in degrees on a colour wheel), a saturation percentage from 0% to 100%, and a lightness percentage from 0% to 100%. The tool expects a format like 243, 75%, 59% — the percentages must include the % sign, and the hue must be a bare number. As soon as you type or pick a colour, all fields update immediately: the primary output is a six‑digit HEX code (#4f46e5), and if each of the three RGB channels can be represented by a single hex digit (i.e., the channel values in decimal are multiples of 17), the tool also shows the three‑digit shorthand form (for example, #a3c would be equivalent to #aa33cc). Beyond the HEX output, the page simultaneously recalculates and displays RGB, HSV, CMYK, and LAB values, giving you a complete cross‑reference.
If your input falls outside the valid ranges — for instance, a hue of 400, a saturation of 120%, or a lightness value typed without the % sign — the tool displays the error message: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” This is the only error message; it covers all formatting and range violations equally. The conversion itself never produces out‑of‑gamut colours because every valid HSL triple already exists inside the sRGB cube. All processing happens in your browser; nothing you enter is uploaded.
The Conversion Algorithm: HSL → RGB → HEX
The transformation proceeds in two steps. First, HSL is converted to RGB using the standard algorithm from the CSS Color Module Level 4 (and earlier CSS3). The hue is normalised to a position on a colour circle; saturation and lightness define the position of the colour relative to a grey axis. The specific formulas involve temporary calculations of chroma and intermediate values that map hue segments to red, green, and blue differences. For example, given H = 243°, S = 75%, L = 59%:
- Normalise S and L to decimals: S = 0.75, L = 0.59.
- Compute chroma:
C = (1 - |2L - 1|) × S = (1 - |1.18 - 1|) × 0.75 = (1 - 0.18) × 0.75 = 0.615. - Find the intermediate
X = C × (1 - |(H / 60) mod 2 - 1|). For H=243, H/60=4.05, floor=4, soH'=4.05 - 4 = 0.05. ThenX = 0.615 × (1 - |0.05×2 - 1|) = 0.615 × (1 - 0.9) = 0.0615. - Determine which RGB components get chroma, X, or 0 based on the hue sextant. For sextant 4 (H between 240 and 300), the mapping is: R = 0, G = X, B = C. So (R, G, B) = (0, 0.0615, 0.615).
- Add the lightness adjustment: each component gets
m = L - C/2 = 0.59 - 0.3075 = 0.2825. Final RGB: R = 0.2825, G = 0.3440, B = 0.8975. - Scale to 0–255: R = 72, G = 88, B = 229 (after rounding). That is exactly the RGB for the colour
#4f46e5— note that the web‑friendly representation rounds to integer channels, which is why you getRGB(79, 70, 229)rather than the exact decimal values.
The second step — RGB to HEX — is a simple conversion: take each 8‑bit value, write it in hexadecimal (padded to two digits if necessary), and concatenate with a # prefix. For the three‑digit shorthand, each channel value must be one of the 16 numbers from 0 to 255 that are multiples of 17 (0, 17, 34, … 255), because doubling a hex digit yields a two‑digit equivalent. When all three channels satisfy that condition, the tool displays the compact form.
Why HSL‑to‑HEX Is Simpler Than Other Conversions
The conversion is direct and lossless within the sRGB gamut, unlike conversions involving LAB or CMYK, which may adjust out‑of‑gamut colours. That distinction matters. If you convert a saturated red from HSL to CMYK on a typical printer profile, the CMYK values are an on‑screen estimate and may differ from professional printing values. Similarly, when converting from LAB to RGB, certain LAB colours fall outside the sRGB cube and must be clipped or compressed, altering the original hue or saturation. HSL and RGB share the same gamut: every HSL input is already inside it, so there is no clipping.
This simplicity also means the transformation is invertible. You can convert an HSL colour to HEX, then convert that HEX back to HSL and recover the exact original triple (within rounding error of the integer hue/saturation/lightness percentages). That is not true for HSL→CMYK or HSL→LAB, because those target spaces have different gamuts and produce approximations.
Practical Applications for Designers and Developers
- Palette construction in CSS: When you define a colour palette using
hsla()in a design file, you may need the solid‑colour HEX equivalent for production code — especially because six‑digit HEX is still the most widely supported format across email clients and older browsers. The tool makes that handoff instantaneous. - Accessibility and contrast: Lightness is the most direct control for meeting WCAG contrast ratios while preserving a brand’s hue. A designer can increment lightness from 40% to 70% until the contrast ratio against white passes AA, then copy the resulting HEX for implementation. The tool lets you iterate quickly without mental arithmetic.
- Theme generation: Many colour‑system generators (like Tailwind CSS or Material Design) start from a set of HSL origins and derive shades by varying lightness. Each derived shade needs its own HEX value; this tool provides that mapping for every step.
- Design handoff from Figma or Sketch: Those tools often display HSL under the colour properties. Developers who receive a design spec with HSL values can use this page to produce the CSS
background-color: #4f46e5;without asking for a second export.
Common Mistakes and How to Avoid Them
| Mistake | What happens | Correct input |
|---|---|---|
Omitting the % sign |
Tool shows the error message | 75% not 75 |
| Using a hue value > 360 or < 0 | Input is invalid | Must be 0–360 integer |
Entering a floating‑point hue like 243.5 |
Accepted — the tool parses decimal hue values and enforces only the 0–360 range | 243.5 is fine as entered |
| Expecting eight‑digit HEX with alpha | The tool produces six‑digit (or three‑digit) HEX; alpha is not part of this conversion | For alpha, you need an RGBA or HSLA conversion |
| Misreading the three‑digit shorthand as a different colour | The shorthand #4f3 is equivalent to #44ff33, which is a legitimate colour but may be mistaken if you don’t double the digits |
Always check the full six‑digit output if in doubt |
The tool’s error message is purposely blunt: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” If you see it, double‑check that you have typed percentages with the % character and kept the hue within range.
FAQ
Q: Can I convert HEX back to HSL using the same tool?
A: The page is named HSL‑to‑HEX and is dedicated to that direction. It provides RGB, HSL, HEX, and other values simultaneously — so if you supply an HSL input, you see the HEX output. For the reverse conversion (HEX to HSL), you would need a different tool or a manual calculation.
Q: Why does the tool also show CMYK values if the conversion is only HSL‑to‑HEX?
A: The CMYK output is provided as a convenience alongside all other colour spaces (RGB, HSV, LAB). The page’s primary purpose is HSL‑to‑HEX, but every colour field updates simultaneously with each edit. The CMYK values are on‑screen estimates and may differ from professional printing profiles.
Q: Does the tool support eight‑digit HEX (with alpha)?
A: No. HEX is a six‑digit (or three‑digit shorthand) RGB notation and carries no alpha unless the eight‑digit form is used. This conversion does not generate an alpha channel. You would need a separate HSLA‑to‑HEXA conversion.
Q: What happens if I type a saturation of 150%?
A: The tool will reject it with the error message because saturation must be between 0% and 100%. The same applies to lightness.
Q: Are there any cases where the HSL to HEX conversion is not one‑to‑one?
A: Within the valid HSL ranges (hue 0–360, saturation 0–100%, lightness 0–100%), every triple maps to exactly one RGB triple and one HEX code. The conversion is fully invertible. However, when rounding the decimal RGB values to 8‑bit integers, different HSL inputs that are extremely close may round to the same integer RGB — that is a property of discrete 8‑bit colour, not a failure of the algorithm.
Q: Does the page remember my previous colours?
A: No. Since all processing is client‑side and no data is uploaded, the tool resets when you refresh the page. There is no history feature.