Hex to HSL Converter
Convert hexadecimal color codes to HSL values for CSS themes, color tokens, hover states, and palette variations. Enter a hex code and copy the hsl() result instantly.
Synchronized color
#8B5CF6Parsed as RGB; malformed or out-of-range channels are rejected, never silently clamped.
Integer or percentage RGB, modern or legacy CSS, Hex with optional alpha, HSL, HSV, OKLCH, LAB, LCH, CMYK, or a CSS name.
Adjust channels
Share this exact input
?color=8B5CF6One input, implementation-ready output
Color workspace
Hex
#RRGGBB
#8B5CF6CSS RGB
Modern space syntax
rgb(139 92 246)Legacy RGB
Comma syntax
rgb(139, 92, 246)RGB %
Percentage channels
rgb(54.5% 36.1% 96.5%)HSL
CSS hue, saturation, lightness
hsl(258 90% 66%)HSV / HSB
Design-tool model
hsv(258, 63%, 96%)OKLCH
Perceptual CSS color
oklch(60.6% 0.219 292.7)LAB
CSS Lab, D50
lab(50.69% 45.85 -71.80)LCH
CSS LCH, D50
lch(50.69% 85.19 302.56)CMYK
Unprofiled approximation
cmyk(43%, 63%, 0%, 4%)How to Convert Hex to HSL
Hex encodes the same three channels as RGB, so the conversion is two steps: read the channel bytes, then re-describe them as hue, saturation, and lightness.
- Split the six digits into three pairs and read each as a base-16 number: #8B5CF6 is R=139, G=92, B=246.
- Divide each channel by 255 to normalize it to 0-1.
- Take max and min of the three normalized channels. Lightness is their midpoint: L = (max + min) / 2.
- If max equals min the colour is grey, so saturation is 0. Otherwise S = (max - min) / (1 - |2L - 1|).
- Hue is the angle of the dominant channel: 60° x ((G-B)/delta mod 6) when red is highest, 60° x ((B-R)/delta + 2) when green is, 60° x ((R-G)/delta + 4) when blue is.
Example: convert #8B5CF6 to HSL
8B = 139, 5C = 92, F6 = 246 -> rgb(139, 92, 246)
normalized: R 0.545, G 0.361, B 0.965
max 0.965 (blue), min 0.361, delta 0.604
L = (0.965 + 0.361) / 2 = 0.663 -> 66%
S = 0.604 / (1 - |2(0.663) - 1|) = 0.902 -> 90%
H = 60 x ((0.545 - 0.361)/0.604 + 4) = 258deg
Result: hsl(258, 90%, 66%)
How to Use the Hex to HSL Converter
Enter a hex color with or without the # symbol. The page immediately shows the HSL equivalent along with Hex, RGB, and CMYK values. Use the color preview to confirm the shade, adjust the sliders if needed, then copy the HSL value for CSS.
Understanding HSL Values
HSL stands for Hue, Saturation, and Lightness. Hue is the position on the color wheel from 0 to 360 degrees. Saturation controls color intensity from gray to vivid. Lightness controls how close the color is to black or white. This structure makes HSL especially practical when you need predictable color variations.
Common Use Cases
Hex to HSL conversion is helpful when converting brand hex colors into CSS variables, creating hover and focus states, building dark mode palettes, or generating a set of related tints and shades from one source color.
Hex to HSL Conversion Table
Hex, RGB, and HSL values for the most commonly used colors. Click any hex code to load it into the converter above.
| 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 Hex to HSL Converter
A hex code is first converted to RGB channel values. Those RGB values are then normalized and translated into hue, saturation, and lightness. The converter handles that math instantly and displays the CSS-ready hsl() value.
HSL is easier to adjust by eye. You can keep the same hue and change only lightness for tints and shades, or reduce saturation for muted variants. That makes HSL useful for themes and design systems.
Yes. Three-character hex colors such as #0AF are expanded before conversion, so #0AF becomes #00AAFF and then converts to HSL.
Yes. The HSL output uses the standard hsl(h, s%, l%) format supported by modern browsers. You can copy it directly into CSS custom properties, Tailwind config values, or component styles.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.