hex#6366F1
rgbrgb(99, 102, 241)
hslhsl(239, 84%, 67%)
hsvhsv(239, 59%, 95%)
cmykcmyk(59%, 58%, 0%, 5%)
oklchoklch(58.54% 0.2 277.12deg)
How to use
01
Add a hex code to the input
Use the Input (HEX) field at the top of the card. Any parseable form works, including #RRGGBB, shorthand, and 8-digit alpha codes. A wrong-length code shows a parse warning instead of output.
02
Verify against the preview
The rendered swatch below the field is your sanity check. Because HSL numbers are less intuitive than hex, comparing the swatch to your design catches wrong inputs before they reach a stylesheet.
03
Copy hsl() from its highlighted row
Scan the six-format grid for the HSL row, marked as the primary output. Its copy button hands you a string like hsl(199, 89%, 48%) that drops straight into a CSS custom property.
Why HEX to HSL
- HSL output for use in CSS color() functions.
- Same panel shows HEX, RGB, HSV, CMYK, OKLCH.
Common questions
What HSL value does #0EA5E9 convert to?
It becomes hsl(199, 89%, 48%): a hue of 199 degrees sits in the cyan-blue range, 89 percent saturation means the color is vivid, and 48 percent lightness puts it near the midpoint between black and white.
Why is the hue number measured in degrees?
Hue is an angle on a 360 degree color wheel. Red sits at 0, green at 120, blue at 240, and the wheel wraps around, so 360 lands back on red. That's why hue can exceed 100 while the other two values are percentages.
How do I build a hover state from the HSL output?
Keep hue and saturation fixed and nudge lightness. Starting from hsl(199, 89%, 48%), a hover of hsl(199, 89%, 57%) reads as the same blue, just brighter. Doing that from two hex codes requires guesswork; in HSL it's one number.
Does converting hex to hsl round the values?
Yes, this tool prints whole numbers for hue, saturation, and lightness, which can shift the color by an invisible amount. Round-tripping back to hex may land a digit or two away from your original code, though no human eye will notice.
Is the HSV row the same thing as HSL?
No, and mixing them up is a classic bug. HSV's V is value, where 100 percent is the pure bright color, while HSL's 100 percent lightness is always white. The grid shows both rows so you can grab whichever your software expects.
What does it mean when saturation comes back as 0%?
You fed in a pure gray. Codes like #808080 have equal red, green, and blue channels, so there's no hue to speak of and saturation collapses to zero. The hue digit shown for grays is arbitrary and harmless.
Can I use the converted HSL values in CSS variables?
That's its best use. Store the pieces as --brand-h: 199, --brand-s: 89%, --brand-l: 48%, then compose hsl(var(--brand-h) var(--brand-s) var(--brand-l)) and derive hovers and tints by overriding only the lightness variable.