HSL to HEX Converter
Color Picker · developer
Convert HSL values to HEX with a fixed input and output format, live preview of the conversion line, and copy-ready results. All processing runs locally in your browser.
Calculator
From: HSL (hue, saturation, lightness)
To: Hexadecimal (#RRGGBB)
About HSL
HSL uses hue (0–360°), saturation (0–100%), and lightness (0–100%). It is convenient for adjusting perceived brightness and vividness.
About HEX
Hexadecimal codes pack red, green, and blue into six (or eight with alpha) base-16 digits. They are the default in CSS, design tools, and APIs.
How to convert HSL to HEX
Enter a valid HSL value in the calculator. The tool follows the pipeline below: parse your input, hold the color as sRGB (with alpha when relevant), then format the result as HEX.
Accepted shapes include CSS-like functions (e.g. rgb(...), hsl(...)) and compact comma-separated numbers where appropriate. Hex may include or omit the leading #.
Conversion procedure
- Parse HSL: accept hsl(h, s%, l%) or three numbers; hue may omit the degree symbol and is wrapped to 0–360°. Saturation and lightness are read as 0–100 (percent signs optional). The parser does not output HSL again here—it only reads your numbers so the tool can move onward to sRGB.
- Convert HSL → sRGB: saturation and lightness are scaled to 0–1. Chroma C = (1 − |2L − 1|) × S. A temporary RGB triple is built from hue’s 60° segment (the “hex cone” model), then the same offset m = L − C/2 is added to each channel. Finally, each channel is multiplied by 255 and rounded to the nearest integer with clamping to 0–255.
- Build HEX: each of R, G, B is clamped to 0–255, rounded to an integer, and written as two uppercase hexadecimal digits. The calculator concatenates them as #RRGGBB. If the internal alpha is less than 1 (from RGBA or 8-digit hex input), two more hex digits are appended so the string becomes #RRGGBBAA; otherwise the six-digit form is used.
- Finalize: the result string is what you copy from the calculator. The line under the fields summarizes the path in short form (HEX ← sRGB ← HSL). Rounding is intentional so values read like typical CSS; tiny differences versus other apps can still appear because of integer hue, saturation, lightness/value, or ink percentages.
- HSL/HSV reminder: when hue, saturation, and lightness/value are shown as whole numbers, more than one underlying RGB can produce the same text. Typing those integers back into a converter may therefore differ by ±1 from a color you first picked as HEX in the Color Picker—that is expected rounding behavior, not a broken formula.
Example
Input (HSL): hsl(204, 70%, 53%)
Output (HEX): #3398DB
Summary
This page converts HSL input into HEX output. The numbered “Conversion procedure” above is the full breakdown: validation and parsing, conversion to a single internal sRGB (+ alpha) sample, derivation of HEX coordinates from that sample, and final rounding to the strings you see in CSS-oriented tools. The same pipeline runs in your browser as you type.
Relationship context
HSL (hue, saturation, lightness) and Hexadecimal (#RRGGBB) are different ways to describe the same sRGB color (except CMYK, which is an approximate ink model). Converting HSL → HEX does not change the underlying color within the limits of each notation; it only changes how numbers are written.
Example conversions
Sample HSL values and the matching HEX output using the same rules as the calculator.
| HSL input | HEX output |
|---|---|
| hsl(0, 100%, 50%) | #FF0000 |
| hsl(120, 100%, 25%) | #008000 |
| hsl(204, 70%, 53%) | #3398DB |
More color format converters
Other dedicated pages (fixed input and output types). Open the Color Picker for the full list.
- CMYK to HEX ConverterCMYK to HEX
- HSL to CMYK ConverterHSL to CMYK
- HSL to HSV ConverterHSL to HSV
- HSL to RGB ConverterHSL to RGB
- HSL to RGBA ConverterHSL to RGBA
- HSV to HEX ConverterHSV to HEX
- RGB to HEX ConverterRGB to HEX
- RGBA to HEX ConverterRGBA to HEX
- CMYK to HSL ConverterCMYK to HSL
- HEX to CMYK ConverterHEX to CMYK
- HEX to HSL ConverterHEX to HSL
- HEX to HSV ConverterHEX to HSV