HSL to Hex Converter
Convert HSL colors to hex codes instantly. Enter a value like hsl(14, 100%, 60%) or adjust the HSL sliders, then copy the hex code for your CSS. All conversions happen in your browser.
Synchronized color
#FF5733Parsed as RGB; malformed or out-of-range channels are rejected, never silently clamped.
Try: hsl(14, 100%, 60%), #FF5733, or rgb(255, 87, 51)
Adjust channels
Share this exact input
?color=FF5733One input, implementation-ready output
Color workspace
Hex
#RRGGBB
#FF5733CSS RGB
Modern space syntax
rgb(255 87 51)Legacy RGB
Comma syntax
rgb(255, 87, 51)RGB %
Percentage channels
rgb(100% 34.1% 20%)HSL
CSS hue, saturation, lightness
hsl(11 100% 60%)HSV / HSB
Design-tool model
hsv(11, 80%, 100%)OKLCH
Perceptual CSS color
oklch(68% 0.21 33.7)LAB
CSS Lab, D50
lab(61.03% 63.55 55.96)LCH
CSS LCH, D50
lch(61.03% 84.67 41.37)CMYK
Unprofiled approximation
cmyk(0%, 66%, 80%, 0%)HSL to Hex Formula
HSL converts to hex by first computing RGB channels from hue, saturation, and lightness, then writing each channel in hexadecimal:
- Compute chroma: C = (1 − |2L − 1|) × S.
- Find the intermediate value X = C × (1 − |(H / 60°) mod 2 − 1|) and match (R′, G′, B′) based on which 60° segment the hue falls in.
- Add the lightness adjustment m = L − C/2 to each channel and scale by 255.
- Convert each rounded channel to a two-digit hex pair and concatenate as #RRGGBB.
Example: convert hsl(14, 100%, 60%) to hex
C = (1 − |2 × 0.6 − 1|) × 1.0 = 0.8
X = 0.8 × (1 − |14/60 mod 2 − 1|) = 0.187
H is in 0-60° segment → (R′, G′, B′) = (C, X, 0), m = 0.2
R = (0.8 + 0.2) × 255 = 255 → FF, G = (0.187 + 0.2) × 255 = 99 → 63, B = 0.2 × 255 = 51 → 33
Result: #FF6333 ≈ #FF5733
How to Use the HSL to Hex Converter
Enter an HSL value like hsl(14, 100%, 60%) in the input field, or switch the sliders to HSL mode and adjust hue, saturation, and lightness visually. The hex code updates live and can be copied with one click, along with RGB and CMYK equivalents.
Designing in HSL, Shipping in Hex
Many design systems generate color scales in HSL because tints and shades are simple lightness adjustments. But brand documents, design tokens, and countless tools still standardize on hex. This converter bridges the two: explore variations in HSL, then export the final hex values into your stylesheet or palette.
Common Use Cases
Converting HSL-based theme calculations to hex for CSS custom properties, exporting colors from JavaScript color libraries that work in HSL, and translating designer-specified HSL adjustments like "same hue, 10% lighter" into concrete hex codes.
Common Colors in HSL and Hex
Reference values for frequently used colors. Click a hex code to load it into the converter.
| Color | Name | Hex | RGB | HSL |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | |
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) |
Need a value that is not listed? Browse the full color library — every hex code has a page with its RGB, HSL, CMYK and OKLCH values, contrast ratios, tints, shades and matching palette colors.
Frequently Asked Questions about HSL to Hex Converter
HSL is first converted to RGB using the standard hue-to-channel formulas, then each RGB value is written as a two-digit hexadecimal pair. Enter hsl(14, 100%, 60%) and the tool outputs the hex code immediately.
HSL is great for designing - adjusting lightness or saturation is intuitive - but many tools, APIs, and config files expect hex. Converting lets you design in HSL and ship in hex.
Yes, both describe the same sRGB color space. Every hsl() value maps to a hex code. Rounding to whole RGB values can shift the result imperceptibly, but the colors are visually identical.
Yes. Switch the slider mode to HSL and drag hue, saturation, and lightness directly. The hex output updates live as you adjust.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.
Hex to HSL Converter
Convert hex color codes to HSL values instantly
HSL to RGB Converter
Convert HSL values to RGB color values
RGB to Hex Converter
Convert RGB and alpha to Hex, CSS formats, color spaces, code, and states
Color Converter
Convert one color into implementation-ready screen and print-reference formats