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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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 inputHEX 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.