HSL to Hex Converter
HSL to Hex Converter. Enter your HSL Input (H, S%, L%) values and the HSL to Hex Converter instantly calculates the matching Hex Output. Use the hex calculator to add or divide hex numbers directly, then check the result in both hex and decimal at once.
Turn any hue, saturation and lightness triple into a CSS-ready code with this HSL to hex converter: type the three values, and instantly get the hex color code with a live preview of the exact shade. Because hex is just the same color written in base sixteen, you can switch notation without changing how the color looks. Below you will find the formula, a fully worked example, and the habits that keep your palette tidy in web design.
What an HSL to Hex Converter Does
An HSL to hex converter translates one color notation into another. HSL describes a color with a hue angle and two percentages, while a hex code packs the red, green and blue channels into six hexadecimal digits. The converter changes the notation only, never the color itself, so converting back returns the same value apart from rounding.
Designers like HSL because it is easy to reason about, and developers like hex because every browser, design tool and style guide accepts it, from legacy sites to web development stacks. A color converter bridges the two so you never have to do the arithmetic by hand.
HSL Color: Hue, Saturation and Lightness
The HSL color model arranges colors around a wheel. Hue is the angle in degrees from 0 to 360 (0° is red, 120° is green, 240° is blue). Saturation runs from 0% (a flat gray) to 100% (fully vivid), and lightness runs from 0% (black) to 100% (white), with 50% showing the purest version of the hue. Designed by computer graphics researchers in the 1970s, this radial layout around a neutral colors axis of grays matches how people describe color; the Wikipedia articles on HSL and HSV cover the history.
Hex Color Code and Hexadecimal Notation
A hex triplet is a six-digit, three-byte value written as #RRGGBB. Each pair uses hexadecimal notation, so one byte runs from 00 to FF, which equals 0 to 255 in decimal. The hex color is the same RGB color model in compact form, and it is used in HTML, CSS and SVG, and an SVG fill takes the same code a stylesheet does.
How to Use the HSL to Hex Color Converter
You can finish a conversion in a few seconds with this HSL to hex color converter: Use the octal to hex converter to translate an octal permission code or value straight into hex without doing the math by hand.
- Enter the hue as a number of degrees from 0 to 360.
- Enter saturation and lightness as percentages from 0 to 100.
- Click the Convert button to get the hex value.
- Check the live preview swatch to confirm it is the shade you meant.
- Copy the result and paste it into your stylesheet or design tool.
The tool is free, needs no sign-in and gives the matching RGB numbers beside the hex code, so you can paste whichever format your project needs.
The HSL to Hex Conversion Formula
Every HSL to hex conversion runs in two stages: first convert HSL to red, green and blue values from 0 to 255, then write each channel as a two digit hex pair. With saturation \(S\) and lightness \(L\) written as fractions between 0 and 1, start with the chroma: Type a Benjamin Moore paint name into the benjamin moore to hex converter and it returns an approximate hex code drawn from a curated list, not official data.
$$C = (1 - |2L - 1|) \times S$$
Next find the second-largest component and the lightness offset, where \(H\) is the hue in degrees:
$$X = C \times \left(1 - \left|\frac{H}{60} \bmod 2 - 1\right|\right), \qquad m = L - \frac{C}{2}$$
The hue sector decides which channel gets which value. Hue 0-60 gives \((C, X, 0)\), 60-120 gives \((X, C, 0)\), 120-180 gives \((0, C, X)\), 180-240 gives \((0, X, C)\), 240-300 gives \((X, 0, C)\) and 300-360 gives \((C, 0, X)\). Each final channel is:
$$R = (R' + m) \times 255$$
Round it to the nearest whole number, then write it in base sixteen with a leading zero if needed. Concatenate the three pairs after a # sign to finish.
Worked Example: Convert HSL to Hex Step by Step
Take a calm teal, hsl(172, 58%, 37%), and walk through the formula.
| Step | Calculation | Result |
|---|---|---|
| 1. Chroma | (1 − |2 × 0.37 − 1|) × 0.58 | 0.4292 |
| 2. Second component | 0.4292 × (1 − |172 ÷ 60 mod 2 − 1|) | 0.3720 |
| 3. Offset | 0.37 − 0.4292 ÷ 2 | 0.1554 |
| 4. Sector 120°-180° | (R′, G′, B′) = (0, C, X) | (0, 0.4292, 0.3720) |
| 5. Add offset, scale to 255 | (0.1554, 0.5846, 0.5274) × 255 | (40, 149, 134) |
| 6. Write each channel in hex | 40 → 28, 149 → 95, 134 → 86 | #289586 |
So hsl(172, 58%, 37%) is #289586, which is rgb(40, 149, 134) in RGB. Because the green and blue channels are close together, the color sits between green and blue on the wheel, which matches a hue of 172°.
Common Color Code Converter Results Worth Memorizing
A few reference points help you sanity-check any color code converter output. Pure hues at full saturation and 50% lightness land on clean hex digits:
| Color | HSL | Hex |
|---|---|---|
| Red | hsl(0, 100%, 50%) | #FF0000 |
| Green | hsl(120, 100%, 50%) | #00FF00 |
| Blue | hsl(240, 100%, 50%) | #0000FF |
| Black | hsl(0, 0%, 0%) | #000000 |
| White | hsl(0, 0%, 100%) | #FFFFFF |
| Mid gray | hsl(0, 0%, 50%) | #808080 |
Any saturation of 0% produces a neutral gray no matter what the hue is, which is why hue is ignored for black, white and gray.
Fixing a Weak Button Color with a Color Code Converter
Priya is a front-end developer handed a style guide that lists the brand coral only as hsl(14, 83%, 56%), but the ticket she is working on asks for a hex value in the design tokens file. She enters hue 14, saturation 83 and lightness 56, clicks Convert, and reads #EC5D32, with rgb(236, 93, 50) shown beside it.
Before she commits it as the primary button fill, she checks the white label on top of it. The contrast ratio comes out at 3.40:1, below the 4.5:1 that WCAG 2.1 level AA requires for normal-size text, so the button fails accessibility review as written.
The fix is a lightness change, not a new hue. She keeps hue 14 and saturation 83% and lowers lightness from 56% to 46%, then runs the same HSL-to-hex step again for each lightness:
| Lightness | Hex | White text contrast | WCAG AA (4.5:1) |
|---|---|---|---|
| 56% | #EC5D32 | 3.40:1 | Fail |
| 46% | #D74114 | 4.51:1 | Pass |
| 41% | #BF3A12 | 5.48:1 | Pass |
At 46% the new code #D74114 clears the threshold by a hair, which is enough for AA but leaves no margin for anti-aliasing on small text. She decides to use the 41% step, #BF3A12, for the resting state and keeps 46% for the hover state, so both pass. Next she pastes both hex codes into the tokens file as --coral-600 and --coral-500, and notes the original HSL source value in a comment so the next designer can trace it back.
Why Convert HSL to Hexadecimal for CSS and Web Design
Many teams author colors in HSL and still ship hex, so converting from HSL to hexadecimal is a daily step. Hex is accepted by every browser and by design tools, and it is compact enough to scan in a long stylesheet. HSL is easier to adjust, so it suits the exploration phase.
Building a Color Palette with Lightness Steps
Keep the hue and saturation fixed and change only lightness to get a shade scale, where each lighter step is a tint of the base. Using the teal above at lightness 25%, 37%, 50% and 90% gives #1B655B, #289586, #36C9B6 and #D7F4F0. A color palette built this way stays consistent, and you can export each step to hex once you are happy.
Contrast and Accessibility
Lowering lightness in HSL and then converting gives a darker hex: the teal from the worked example at 37% is #289586, while the same hue and saturation at 25% become #1B655B. Check the converted codes in a contrast checker before committing them to a design system.
Design Tokens, UI Design and Brand Guides
Tokens in a UI design system often hold hex so that every platform reads them the same way. When a brand guide lists a color only in HSL, convert it once and store the hex in your tokens, a theme file or a color theme variable.
Color Formats Beyond HSL to Hex: RGB, HSV, CMYK and OKLCH
HSL and hex are only two of the common color formats. Each color space answers a different question:
- RGB and RGBA list channel values from 0 to 255, plus an alpha channel for opacity in RGBA.
- HSLA is HSL with an alpha value; the color part converts exactly the same way.
- HSV uses value in place of lightness, so full value is the brightest version of the hue.
- CMYK targets print, where ink mixes subtract light, so a digital screen gamut and a printed one never match perfectly. A CMYK value is also not interchangeable with an SVG or CSS color, so convert through RGB first.
- OKLCH is perceptual: equal numeric steps look equally different to human vision, which makes it popular for modern shade scales.
When you need the reverse direction, a hex to HSL converter does the opposite of this tool and returns the same color.
Shorthand Hex, Alpha and Other Conversion Tips
A shorthand hex code such as #3C9 doubles each digit, so it expands to #33CC99. Hex can also carry transparency: an eight-digit code puts the opacity in the last two-digit hex pair, where FF is fully opaque and 80 is about half. The alpha value from HSLA can be carried across unchanged.
Keep these habits in mind:
- Round hue, saturation and lightness sensibly; small rounding differences can shift a channel by one step, which is invisible on screen.
- If the tool reports an invalid input, check that hue is between 0 and 360 and that both percentages are between 0 and 100.
- Use a color picker or color wheel when you do not yet know the values, then convert the chosen color.
- For print work, convert the final hex to CMYK in a dedicated tool, and expect CMYK to look slightly duller than the screen color.
- Adjust saturation and lightness in HSL first, then convert, so the final hex keeps the same hue.
Frequently Asked Hex Conversion Questions in Practice
People most often ask whether the conversion is lossless. Within the RGB family it is: HSL, hex and RGB all describe the same screen color, so no quality is lost. It only becomes approximate when you cross into other spaces such as CMYK, where the gamut is different.
Another frequent question is which format to write in a stylesheet. Browsers support all of them, so pick the one your team reads most easily: hex for compact constants, HSL when you want to tweak lightness by hand, and OKLCH for perceptual scales.
Finally, remember that you can paste the final hex into HTML attributes, SVG fills and CSS custom properties, and the shade will render identically in every browser and on every design tool you use.