HSL
HSL describes a color by hue (0–360°), saturation (0–100%), and lightness (0–100%). It is the format CSS recommends for human-readable palettes because nudging the hue keeps the same lightness, unlike RGB where every channel matters.
HSL to HEX Color Converter
hsl(16, 100%, 60%) = #FF6B35
Convert HSL color values to hexadecimal color values exactly, via the canonical 8-bit sRGB representation. Every result you see is the same number the W3C CSS spec would produce — no proprietary adjustments, no perceptual fudging. Try the live converter below, or scan the reference table for twenty-five named colors and their HSL ↔ HEX pairs.
hsl(H, S%, L%) with hue 0–360, saturation and lightness 0–100
Six hex digits (#RRGGBB) or three digits (#RGB)
Preview
#FF6933
Try
How to convert HSL color to hexadecimal color
Paste or type your color
Enter the HSL color above. Convertitive accepts hsl(h, s%, l%) with hue 0–360, saturation and lightness 0–100.
Read the HEX value
The result appears the moment your input parses. For example, hsl(16, 100%, 60%) (Convertitive's coral accent) becomes #FF6B35.
Copy and share
Click the copy button to grab the result. The preview swatch lives-updates so you can sanity-check the conversion at a glance.
HSL to HEX reference table
Twenty-five well-known colors with their HSL and HEXrepresentations side by side. The swatches are rendered directly from the computed RGB, so what you see is exactly what you will ship.
| Name | HSL | HEX | |
|---|---|---|---|
| Black | hsl(0, 0%, 0%) | #000000 | |
| White | hsl(0, 0%, 100%) | #FFFFFF | |
| Red | hsl(0, 100%, 50%) | #FF0000 | |
| Lime | hsl(120, 100%, 50%) | #00FF00 | |
| Blue | hsl(240, 100%, 50%) | #0000FF | |
| Yellow | hsl(60, 100%, 50%) | #FFFF00 | |
| Cyan | hsl(180, 100%, 50%) | #00FFFF | |
| Magenta | hsl(300, 100%, 50%) | #FF00FF | |
| Silver | hsl(0, 0%, 75%) | #C0C0C0 | |
| Gray | hsl(0, 0%, 50%) | #808080 | |
| Maroon | hsl(0, 100%, 25%) | #800000 | |
| Olive | hsl(60, 100%, 25%) | #808000 | |
| Green | hsl(120, 100%, 25%) | #008000 | |
| Teal | hsl(180, 100%, 25%) | #008080 | |
| Navy | hsl(240, 100%, 25%) | #000080 | |
| Purple | hsl(300, 100%, 25%) | #800080 | |
| Orange | hsl(39, 100%, 50%) | #FFA500 | |
| Pink | hsl(350, 100%, 88%) | #FFC0CB | |
| Gold | hsl(51, 100%, 50%) | #FFD700 | |
| Tomato | hsl(9, 100%, 64%) | #FF6347 | |
| Coral | hsl(16, 100%, 66%) | #FF7F50 | |
| Salmon | hsl(6, 93%, 71%) | #FA8072 | |
| Indigo | hsl(275, 100%, 25%) | #4B0082 | |
| Chocolate | hsl(25, 75%, 47%) | #D2691E | |
| Crimson | hsl(348, 83%, 47%) | #DC143C |
Frequently asked questions
- How do I convert HSL color to hexadecimal color?
- Paste your HSL value into the input above. Convertitive parses it, maps it through 8-bit sRGB, and re-emits it in HEX. For example, hsl(16, 100%, 60%) becomes #FF6B35.
- What is the exact HEX value of hsl(16, 100%, 60%)?
- hsl(16, 100%, 60%) in HSL equals #FF6B35 in HEX.
- Why might my HSL → HEX round-trip produce a slightly different value?
- HEX stores 8 bits per channel, so converting through HEX introduces at most ±1 in any channel. HSL and HSV store hue/saturation/lightness as rounded percentages, which costs about ±0.5% of perceived saturation on extreme values. For most UI work the difference is invisible.
- Does this support transparency or alpha?
- Not yet. The current version handles fully opaque colors only. RGBA/HSLA inputs are silently ignored beyond the first three channels. Alpha support is on the roadmap.
- Are color names supported?
- Not directly as input — but the reference table on every page shows twenty-five common CSS named colors with their HSL and HEX equivalents. Copy the value you want into the calculator above.
- Why does the swatch sometimes look wrong on my screen?
- Browsers handle color profiles differently. On most modern displays the rendered swatch matches the stored sRGB exactly. On wide-gamut displays without an active sRGB profile, very saturated colors may render slightly more vivid than the math implies.
- Can I use these results in CSS directly?
- Yes. Every output above is a valid CSS color expression. HEX values include the # prefix; RGB/HSL/HSV outputs are in the standard function form CSS accepts.
- Are the conversions WCAG-accurate?
- The conversions are mathematically exact within IEEE 754 double precision. WCAG contrast ratios require an additional sRGB-to-linear-luminance step that is not part of HEX/RGB/HSL/HSV conversions — Convertitive will ship a dedicated contrast checker later.
About HSL and HEX
HEX
HEX (hexadecimal) is the standard color notation on the web: a # followed by six hex digits, two per RGB channel. #FF0000 is pure red, #000000 is black, #FFFFFF is white. The 3-digit shorthand #F00 expands to #FF0000.