HSL to HEX Converter

HSL to HEX converter for CSS colors

This HSL to HEX converter turns hue, saturation and lightness values into a HEX code and an RGB value as you type. Drag the sliders or paste an hsl() value, then copy the result. It is free, runs in your browser and needs no signup.

HSL is easy for people to adjust. HEX is the format most style sheets, design files and brand guides still expect. The converter links the two so you can think in HSL and ship in HEX.

How to convert HSL to HEX step by step

1. Type a value such as hsl(217, 71%, 53%) into the HSL color value field, or move the Hue (degrees), Saturation (%) and Lightness (%) sliders.
2. Optionally set Alpha (opacity %) if the color is translucent.
3. Read the large preview swatch. It shows the HEX code, such as #3273DC, and the color name when one is found.
4. Check the result rows (HEX, HEX without alpha, Short HEX, RGB, CSS hsl(), CSS modern syntax, HSV / HSB and CMYK).
5. Click any value or its copy button to copy it, or use Copy HEX, Copy RGB, Copy HSL and Copy all under the results.

The HSL examples buttons load four sample colors if you only want to see how the output looks.

What the HSL to HEX converter shows you

• Flexible input: the field accepts hsl(), hsla() and the modern space-separated form such as hsl(217 71% 53% / 50%). Hue can be written in deg, rad, grad or turn.
• Several outputs: HEX, 8-digit HEX when alpha is below 100%, short HEX when every pair repeats, plus RGB, HSV / HSB and an approximate CMYK.
• Step-by-step math: the panel How This HSL Value Becomes HEX writes out chroma, the hue sector and the final rounded RGB values.
• Hue variations: twelve swatches keep your saturation and lightness and step the hue by 30 degrees. Click one to use it.
• Contrast check: the color is tested on white and on black against the WCAG 2 AA and AAA levels.
• Code and sharing: copy CSS, SCSS or JSON with your own token name, download CSS or JSON, or use Share link to reopen the same HSL values later.

How does HSL convert to HEX?

HSL converts to HEX in two stages: the hue, saturation and lightness are converted to red, green and blue values from 0 to 255, then each channel is written as a two-digit hexadecimal pair. The first stage follows the algorithm in the CSS Color Module Level 4 HSL to RGB section.

The formulas use saturation S and lightness L as fractions between 0 and 1:

• C = (1 - |2L - 1|) x S is the chroma, the colorful range of the color.
• X = C x (1 - |(H / 60) mod 2 - 1|) is the middle channel for the current hue sector.
• m = L - C / 2 lifts all three channels to the right lightness.

The hue picks a 60-degree sector that decides which channel gets C, which gets X and which gets 0. Add m to each, multiply by 255 and round.

Worked example: hsl(217, 71%, 53%) to #3273DC

Start with H = 217, S = 0.71 and L = 0.53. Then C = (1 - |1.06 - 1|) x 0.71 = 0.6674, and 217 / 60 = 3.617, so X = 0.6674 x (1 - |1.617 - 1|) = 0.2558. Finally m = 0.53 - 0.3337 = 0.1963.

A hue of 217 falls in the 180 to 240 sector, where red gets 0, green gets X and blue gets C. That gives R = 255 x 0.1963 = 50, G = 255 x (0.2558 + 0.1963) = 115 and B = 255 x (0.6674 + 0.1963) = 220. In hexadecimal those are 32, 73 and DC, so the result is #3273DC.

Default blue

HSL to HEX examples with RGB values

The table lists common HSL inputs and their converted values. Each row can be reproduced by typing the HSL value into the converter.

Can you convert HSLA to HEX with transparency?

Yes. A translucent HSLA color becomes an 8-digit HEX code, where the last two digits store opacity. The converter shows this in the main HEX row and also gives a HEX without alpha row.

The alpha value from 0 to 1 is multiplied by 255 and rounded. For hsl(45 100% 60% / 50%), the opaque color is #FFCC33 and 0.5 x 255 = 127.5, which rounds to 128, or 80 in hex. The full code is #FFCC3380.

The MDN reference for CSS hex colors confirms that browsers read 4-digit and 8-digit notation with alpha. If you work in the other direction, the HEX to HSL converter reverses the process.

Why HEX can differ slightly from your HSL values

HEX stores each channel as a whole number from 0 to 255, so the converter rounds. HSL values that you type can be decimals, but the HEX code cannot keep that extra precision.

Converting a HEX code back to whole-number HSL can then move a value by one point, because several HSL inputs round to the same HEX. Keep your original HSL numbers in your design tokens if exact values matter, and use the HEX as the rounded output.

The converter also shows a notice when a color falls outside the sRGB range and has been clipped to the nearest displayable value, or when an entered number was outside its valid range and was clamped.

When to use HSL and when to use HEX

Use HSL while designing and HEX when you hand off or paste a fixed value. Both describe the same sRGB colors. HEX is a compact way to write the red, green and blue channels, as the HEX vs RGB comparison explains.

• Hover and active states: keep hue and saturation, then lower lightness by 5 to 10 points. Convert the result to HEX for a design file.
• Theme tokens: store a base HSL and export HEX through the CSS, SCSS or JSON snippet with your token name.
• Brand guidelines: printed style guides and design tools commonly list HEX, so convert before sharing.
• Color families: change only the hue to find siblings with the same visual weight. The tint and shade scale generator helps build full scales.

How to check contrast ratio for your HEX color

Lightness is the quickest control for contrast. Raise or lower it and watch the ratio on the white and black cards in the contrast section.

WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text and interface components at level AA, and 7:1 and 4.5:1 at level AAA. The rules are defined in the WCAG 2.2 Understanding Contrast (Minimum) page. The panel checks your color only against white and black, so for a specific text and background pair use the contrast checker.

Common mistakes when converting HSL to HEX

• Forgetting the percent signs: saturation and lightness in hsl() are percentages. Write 71%, not 71.
• Expecting hue to matter at 0% saturation: a saturation of 0% is always a gray, and lightness 0% or 100% is always black or white.
• Treating hue as a percentage: hue is an angle from 0 to 360 degrees. Both 0 and 360 are red.
• Mixing up HSL and HSV: the same numbers mean different colors in the two models. See HSL vs HSV before you copy values between tools.
• Using the CMYK row for print: the CMYK value is an approximation. For print work, use the HEX to CMYK converter and a proof from your printer.

The MDN page for the CSS hsl() function lists every accepted syntax if you need to check a value.

Convert more HEX, RGB and HSL formats at once

If you have a list of colors, the bulk color converter handles many values at once. For any other pair of formats, the general color converter covers HEX, RGB, HSL and HSV in one place.