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.
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%) |
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.