HSL to HEX

Convert HSL color to HEX

HSL to HEX

Translate HSL input into HEX with a clear form-based workflow.

Working color

Use a color-aware form instead of a generic input/output template.

Source input

Swatch

Result

The tool-specific output stays visible together with derived color formats.

Waiting for a valid color value...

HEX

#4F46E5

RGB

rgb(79, 70, 229)

HSL

hsl(243, 75%, 59%)

HSV

hsv(243, 69%, 90%)

CMYK

cmyk(66%, 69%, 0%, 10%)

OKLCH

Unavailable

Palette preview

What is HSL to HEX

Last reviewed: April 18, 2026

HSL (Hue, Saturation, Lightness) is a color model built around how humans perceive color, making it intuitive for designers to pick and tweak shades.

HSL to HEX Converter takes an hsl() triple — hue in degrees, saturation and lightness as percentages — and returns the equivalent 6-digit hex code, or 8-digit hex when an alpha channel is provided via hsla().

The converter accepts both modern space-separated syntax (hsl(20 100% 63%)) and the legacy comma-separated form (hsl(20, 100%, 63%)), and gracefully handles hue values outside the 0–360° range by wrapping around the color wheel.

Why use it

Ship design tokens as hex after computing them programmatically in HSL for easier palette generation.
Normalize a palette generated from an HSL-based picker into the hex values your brand guidelines require.
Compare a hue-rotated HSL color against its hex twin to verify color-mixing math in your design system.

Features

Accepts hsl(h s% l%) with space- or comma-separated channels and optional leading 'hsl()' wrapper
Wraps hue values outside 0–360° automatically (hsl(400 50% 50%) treated as hsl(40 50% 50%))
Emits 8-digit hex when input is hsla() with an alpha channel
Batch mode for converting a palette table (one HSL per line) into a matching hex column
Lowercase or uppercase hex output toggle for matching brand style-guide conventions

How to use HSL to HEX

Enter an HSL value. Type hsl(20 100% 63%), hsl(20, 100%, 63%), or the bare triple 20,100,63. Hue is in degrees; saturation and lightness are percentages.
Verify the swatch. The converter shows a live color swatch so you can sanity-check against what Figma or your browser shows for the same HSL.
Copy the hex. Click copy on the hex output. The default is lowercase (#ff8040); toggle to uppercase if your project uses that convention.
Convert a palette. Switch to Batch mode, paste a column of hsl() values, and download a CSV pairing HSL inputs with hex outputs.

Example (before/after)

HSL input

Paste your HSL input so it can be converted into HEX for your next step.

HEX output

Get HEX output converted from HSL that is ready to review, copy, or export into the next step of your workflow.

Common errors

Source format does not match the tool

Conversions fail when the pasted input is not actually in the expected source format.

Fix: Verify the source format first, then paste it into the correct converter.

Partial or inconsistent data

Broken rows, missing fields, or incomplete markup can block conversion.

Fix: Use a complete input sample with the structure intact before converting it.

Unexpected output assumptions

Different target formats can flatten, restructure, or serialize values differently.

Fix: Review the converted output and confirm it matches the target system before using it downstream.

FAQ

What happens if I paste a hue value greater than 360°?

Hue wraps around the color wheel — hsl(400 50% 50%) is treated as hsl(40 50% 50%) because 400° = 360° + 40°. Negative hue values wrap the other direction (hsl(-20) = hsl(340)). The tool normalizes the input and shows the effective hue so you can verify.

Can saturation or lightness go above 100% or below 0%?

No. Saturation and lightness are clamped to 0–100% because values outside that range have no meaningful color representation. Out-of-range input is clipped with a visible warning so you know something was adjusted.

Does the converter produce the same hex as Chrome DevTools?

Yes, within rounding. DevTools uses the standard sRGB HSL-to-RGB conversion and then rounds each channel to the nearest integer; this tool follows the same algorithm, so the hex output matches byte-for-byte for any HSL that both sides round the same way.

How is hsla() alpha mapped to the 8-digit hex byte?

The alpha is multiplied by 255 and rounded to the nearest integer. hsla(20 100% 63% / 0.5) becomes #ff804080 (0x80 = 128 = round(0.5 × 255)). The two-character alpha hex always appears as the last byte in the output.

Is the hex output safe to use in CSS-in-JS or Tailwind tokens?

Yes. The output is a standard CSS hex color, so it drops into styled-components template literals, Tailwind theme extensions, or design-token JSON files without modification. Nothing about the conversion introduces framework-specific syntax.

Can I round-trip HSL → HEX → HSL and get back the same value?

Within about ±0.5° of hue and ±0.5% of saturation/lightness, yes. The round-trip introduces minor rounding because hex has 256 discrete steps per channel while HSL is continuous — the drift is well below perceptual threshold.

Related tools

Continue the workflow with related tools for hSL to HEX, adjacent input and output steps, or other utilities in the same category. You can also browse the full Color Converters category for more options.

HEX to HSL

Convert HEX color to HSL

HSL to RGB

Convert HSL color to RGB

HEX to HSV

Convert HEX color to HSV

HEX to RGB

Convert HEX color to RGB

HSV to HEX

Convert HSV color to HEX

RGB to HEX

Convert RGB color to HEX

RGB to HSL

Convert RGB color to HSL

CMYK to HEX

Convert CMYK color to HEX

HEX to CMYK

Convert HEX color to CMYK

HEX to OKLCH

Convert HEX color to OKLCH (CSS native)

OKLCH to HEX

Convert OKLCH color to HEX

HSV to RGB

Convert HSV color to RGB