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.
HEX to HSL Color Converter
#FF6B35 = hsl(16, 100%, 60%)
Convert hexadecimal color values to HSL 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 HEX ↔ HSL pairs.
Six hex digits (#RRGGBB) or three digits (#RGB)
hsl(H, S%, L%) with hue 0–360, saturation and lightness 0–100
Preview
#FF6B35
Try
How to convert hexadecimal color to HSL color
Paste or type your color
Enter the HEX color above. Convertitive accepts six hex digits (#rrggbb) or three digits (#rgb).
Read the HSL value
The result appears the moment your input parses. For example, #FF6B35 (Convertitive's coral accent) becomes hsl(16, 100%, 60%).
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.
HEX to HSL reference table
Twenty-five well-known colors with their HEX and HSLrepresentations side by side. The swatches are rendered directly from the computed RGB, so what you see is exactly what you will ship.
| Name | HEX | HSL | |
|---|---|---|---|
| Black | #000000 | hsl(0, 0%, 0%) | |
| White | #FFFFFF | hsl(0, 0%, 100%) | |
| Red | #FF0000 | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | hsl(120, 100%, 50%) | |
| Blue | #0000FF | hsl(240, 100%, 50%) | |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) | |
| Cyan | #00FFFF | hsl(180, 100%, 50%) | |
| Magenta | #FF00FF | hsl(300, 100%, 50%) | |
| Silver | #C0C0C0 | hsl(0, 0%, 75%) | |
| Gray | #808080 | hsl(0, 0%, 50%) | |
| Maroon | #800000 | hsl(0, 100%, 25%) | |
| Olive | #808000 | hsl(60, 100%, 25%) | |
| Green | #008000 | hsl(120, 100%, 25%) | |
| Teal | #008080 | hsl(180, 100%, 25%) | |
| Navy | #000080 | hsl(240, 100%, 25%) | |
| Purple | #800080 | hsl(300, 100%, 25%) | |
| Orange | #FFA500 | hsl(39, 100%, 50%) | |
| Pink | #FFC0CB | hsl(350, 100%, 88%) | |
| Gold | #FFD700 | hsl(51, 100%, 50%) | |
| Tomato | #FF6347 | hsl(9, 100%, 64%) | |
| Coral | #FF7F50 | hsl(16, 100%, 66%) | |
| Salmon | #FA8072 | hsl(6, 93%, 71%) | |
| Indigo | #4B0082 | hsl(275, 100%, 25%) | |
| Chocolate | #D2691E | hsl(25, 75%, 47%) | |
| Crimson | #DC143C | hsl(348, 83%, 47%) |
Frequently asked questions
- How do I convert hexadecimal color to HSL color?
- Paste your HEX value into the input above. Convertitive parses it, maps it through 8-bit sRGB, and re-emits it in HSL. For example, #FF6B35 becomes hsl(16, 100%, 60%).
- What is the exact HSL value of #FF6B35?
- #FF6B35 in HEX equals hsl(16, 100%, 60%) in HSL.
- Why might my HEX → HSL 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 HEX and HSL 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 HEX and HSL
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.