justyourpaletteHex to HSL
Turn a hex code into hue, saturation and lightness.
- 100% Free
- No Sign Up
- Works in Your Browser
Hex to HSL
Convert hex color codes to HSL values
More Color Tools
View all tools- Color converterConvert any color between hex, RGB, HSL, CMYK and more
- Hex to RGBConvert hex color codes to RGB values
- RGB to hexConvert RGB values to a hex color code
- HSL to hexConvert HSL values to a hex color code
- RGB to HSLConvert RGB values to HSL
- Palette generatorGenerate color palettes and lock the ones you like
- Color pickerPick a color and copy it as hex, RGB or HSL
- Contrast checkerCheck text and background contrast against WCAG
- Palette from imageExtract a color palette from any photo
Every everyday color tool, right in your browser.
No software. No uploads. No signup.
Browse all 28 tools- Color tools
- 28
- Named colors
- 139
- Curated palettes
- 216
How to use the hex to HSL
Three steps, all in your browser.
- 1
Enter a color
Type or paste a code in any format, or use the picker.
- 2
See every format
The converted values update as you type, in every format at once.
- 3
Copy the codes
Copy any color code in one click, or share the page link.
Hex to HSL: what to know
Hex to HSL converts a hex color code into hue, saturation and lightness. Hue is the color's angle on the color wheel (0° red, 120° green, 240° blue), saturation is how vivid it is, and lightness runs from black at 0% through the pure color at 50% to white at 100%.
HSL is popular in CSS because it's easy to adjust by hand. Want a lighter version of a button color for its hover state? Keep the hue and saturation and raise the lightness. Want a muted background? Lower the saturation. With hex you'd have to recalculate all three channels.
The trade-off is that HSL lightness isn't perceptual: yellow at 50% lightness looks far brighter than blue at 50%. For palettes where colors need to look equally light, convert to OKLCH instead.
Popular uses
- Creating hover and active states from a base color
- Building CSS custom properties that are easy to tweak
- Understanding which hue family a hex code belongs to
- Making muted or pastel variants of brand colors
Tips for the best result
- To make a tint, raise lightness; to make a shade, lower it, keeping hue and saturation.
- Grays have 0% saturation, and their hue doesn't matter.
- Modern CSS accepts hsl(333 71% 51%) without commas, and with / 0.5 for alpha.
Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.