🎨 HSL to Hex Converter, Convert Hue, Saturation and Lightness to Hex
By Shihab Mia · Updated 2026-08-01
Live color preview
Enter H, S and L values (or edit the HSL string) and the hex code updates live.
| RGB (0 to 255) | Red | Green | Blue |
|---|---|---|---|
| Value | 51 | 153 | 255 |
An HSL to hex converter takes a hue, saturation and lightness value and returns the exact six-digit hex code designers and developers use in CSS, design tools and image editors. Enter H (0 to 360 degrees), S and L (both 0 to 100 percent) below and this tool runs the standard HSL to RGB formula, rounds each channel to a whole number from 0 to 255, and formats the result as an uppercase #RRGGBB hex code with a live swatch. Everything runs in your browser, so nothing you type is uploaded anywhere.
What is the HSL to Hex Converter?
HSL and hex describe the exact same colors, they just use different mental models to get there. HSL (hue, saturation, lightness) is built around how people actually think about color: hue is the position on a color wheel from 0 to 360 degrees, saturation is how vivid or washed-out the color is, and lightness is how close it sits to black or white. Hex, by contrast, is a machine-friendly format: three pairs of hexadecimal digits, one each for red, green and blue, packed into a single six-character string like #3399FF. When you convert HSL to hex you are translating a human-intuitive description into the compact format that browsers, image files and most design software store colors in internally.
The reason both formats persist in CSS and design tools is that they solve different problems. HSL makes it trivial to build a color palette by eye: keep the hue fixed and slide lightness from 10% to 90% to get a tint-to-shade ramp, or rotate the hue by 120 degrees three times to get an evenly spaced triadic scheme. Hex, meanwhile, is what gets stored in design files, exported from tools like Figma and Photoshop, and pasted into brand guidelines, because it is compact, unambiguous and universally supported, including in contexts (older email clients, some image formats) that never adopted hsl() as a CSS function. A hsl to hex converter bridges the two: you reason in HSL, then hand off a hex code wherever one is required.
Under the hood, converting hsl to hex is a two-step process. First, hue, saturation and lightness are converted to RGB using the standard formula: compute a chroma value from saturation and lightness, distribute that chroma across the red, green and blue channels based on which 60-degree segment of the color wheel the hue falls into, then add a lightness offset so the final channel values land in the right overall brightness range. Second, each of the resulting red, green and blue values (0 to 255) is rounded to the nearest integer and written as a two-digit hexadecimal number, then the three pairs are concatenated with a leading hash to produce the hex code. This tool performs exactly that math, live, as you type.
A detail worth knowing: because the HSL to RGB formula involves rounding at the final step, converting hsl to hex and then converting that hex code back to HSL can occasionally return a value that is off by a fraction of a degree or a percentage point from what you started with. This is normal floating-point rounding, not a bug, and it rarely matters visually since a one-unit difference in hue or lightness is invisible to the eye. If you need a color to round-trip perfectly between hsl to hex and back, keep track of the original HSL values separately rather than relying on the hex code as the source of truth.
When to use it
- Converting a color you designed by eye in HSL sliders into the hex code your CSS, design system or brand guide actually needs.
- Checking what a specific hsl() CSS value like hsl(210, 100%, 60%) actually looks like and what hex code it corresponds to.
- Building a tint or shade ramp by adjusting lightness in HSL, then converting each step to hex for a design token file.
- Translating colors between design tools and codebases where one side works in HSL and the other expects #RRGGBB hex.
How to use the HSL to Hex Converter
- Enter a hue between 0 and 360 degrees in the H field.
- Enter saturation and lightness as percentages between 0 and 100 in the S and L fields.
- Read the resulting hex code, RGB values and live color swatch, which all update instantly.
- Press Copy hex to copy the #RRGGBB code to your clipboard for use in CSS, design tools or documents.
Formula & method
Worked examples
Converting hsl(210, 100%, 60%), a bright sky blue, to hex.
- S = 1.0, L = 0.6, so C = (1 - |2(0.6) - 1|) x 1.0 = (1 - 0.2) x 1.0 = 0.8.
- H = 210 falls in the 180-240 segment, so X = 0.8 x (1 - |(210/60 mod 2) - 1|) = 0.8 x (1 - |1.5 - 1|) = 0.4.
- In this segment (R1, G1, B1) = (0, X, C) = (0, 0.4, 0.8). m = L - C/2 = 0.6 - 0.4 = 0.2.
- Add m to each and multiply by 255: R = (0 + 0.2) x 255 = 51, G = (0.4 + 0.2) x 255 = 153, B = (0.8 + 0.2) x 255 = 255.
Result: #3399FF, which is rgb(51, 153, 255)
Converting hsl(0, 0%, 50%), a neutral mid-gray with zero saturation, to hex.
- S = 0 means C = (1 - |2(0.5) - 1|) x 0 = 0, so there is no color, only gray.
- With C = 0, X is also 0 regardless of hue, and (R1, G1, B1) = (0, 0, 0) in every segment.
- m = L - C/2 = 0.5 - 0 = 0.5, so every channel becomes (0 + 0.5) x 255 = 127.5, rounded to 128.
- Since saturation is 0, the hue value is irrelevant, any hue at S=0 produces the exact same gray.
Result: #808080, which is rgb(128, 128, 128)
Common HSL values and their hex equivalents
| HSL | Hex | Description |
|---|---|---|
| hsl(0, 100%, 50%) | #FF0000 | Pure red |
| hsl(120, 100%, 50%) | #00FF00 | Pure green |
| hsl(240, 100%, 50%) | #0000FF | Pure blue |
| hsl(60, 100%, 50%) | #FFFF00 | Pure yellow |
| hsl(180, 100%, 50%) | #00FFFF | Cyan |
| hsl(300, 100%, 50%) | #FF00FF | Magenta |
| hsl(0, 0%, 0%) | #000000 | Black (any hue, 0% lightness) |
| hsl(0, 0%, 100%) | #FFFFFF | White (any hue, 100% lightness) |
What each HSL component controls
| Component | Range | Effect |
|---|---|---|
| Hue (H) | 0 to 360 degrees | Position on the color wheel: 0 red, 120 green, 240 blue, wrapping back to red at 360 |
| Saturation (S) | 0 to 100 percent | 0% is fully gray regardless of hue, 100% is the most vivid version of that hue |
| Lightness (L) | 0 to 100 percent | 0% is always black, 100% is always white, 50% is the purest version of the hue at full saturation |
Common mistakes to avoid
- Entering saturation or lightness as a decimal fraction instead of a percentage. CSS and this tool expect S and L as numbers from 0 to 100 (percent), not 0 to 1. Typing 0.6 instead of 60 for lightness will produce an almost-black result because it is treated as 0.6 percent, not 60 percent.
- Assuming hue wraps like a normal number range. Hue is circular: 0 and 360 both point to red, and a value like 370 is equivalent to 10. This tool normalizes out-of-range hues automatically, but when reading HSL by hand remember the wheel wraps rather than clamping at 360.
- Expecting a perfect round-trip through hex and back to HSL. Because RGB channels are rounded to whole numbers between 0 and 255, converting hsl to hex and then back to hsl can shift the hue, saturation or lightness by a small fraction. This rounding is expected and is not a bug in the converter.
- Forgetting that saturation has no visible effect at 0% or 100% lightness. At 0% lightness the color is always black, and at 100% lightness it is always white, no matter what hue or saturation you set. If your hex result keeps coming out as black or white unexpectedly, check whether lightness is stuck at an extreme.
Glossary
- HSL
- A color model expressed as hue (0-360 degrees), saturation (0-100%) and lightness (0-100%), designed to match how people intuitively describe color.
- Hex code
- A six-digit base-16 representation of a color as #RRGGBB, where each pair of digits is one of the red, green or blue channels from 00 to FF.
- Hue
- The base color itself, measured as an angle from 0 to 360 degrees around a color wheel, for example 0 is red and 240 is blue.
- Saturation
- How vivid or muted a color is, from 0% (fully gray) to 100% (the most intense version of that hue).
- Lightness
- How close a color sits to black (0%) or white (100%), with 50% giving the purest version of the hue at a given saturation.
- Chroma
- An intermediate value used inside the HSL to RGB formula that represents the color intensity before the lightness offset is applied.
Frequently asked questions
How do I convert HSL to hex?
Enter the hue, saturation and lightness values into this tool and it applies the standard HSL to RGB formula, rounds each channel to an integer from 0 to 255, and formats the result as an uppercase #RRGGBB hex code instantly.
What is the formula for HSL to hex conversion?
HSL is first converted to RGB using a chroma-based formula that distributes color across the red, green and blue channels depending on the 60-degree hue segment, then each RGB channel is rounded and written as two hexadecimal digits to form the final hex code.
Why does my hex code look slightly different after converting back to HSL?
Rounding each RGB channel to a whole number between 0 and 255 introduces tiny precision loss, so a round trip through hex and back to HSL can shift by a fraction of a degree or percentage point. This is normal and visually imperceptible.
What hue, saturation and lightness values give pure black or white?
Lightness of 0% always produces black (#000000) and lightness of 100% always produces white (#FFFFFF), regardless of what hue or saturation you set, because lightness alone controls the extremes of the range.
Can I enter an hsl() CSS string directly?
Yes, paste a value like hsl(210, 100%, 60%) into the HSL string field and the tool parses the numbers, fills in the individual H, S and L fields, and updates the hex code and swatch to match.
Is this HSL to hex converter accurate for design work?
Yes, it implements the same standard HSL to RGB formula used by browsers and design software, rounding to the nearest whole RGB value before formatting as hex, so the output matches what you would get from CSS or a color picker using the same HSL input.