justyourpaletteHSL to Hex
Turn hue, saturation and lightness into a hex code.
- 100% Free
- No Sign Up
- Works in Your Browser
HSL to hex
Convert HSL values to a hex color code
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
- Hex to HSLConvert hex color codes to HSL values
- 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 hSL to hex
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.
HSL to Hex: what to know
HSL to Hex converts hue, saturation and lightness into a hex color code. Enter the three values, or paste an hsl() value from your CSS, and copy the matching hex code for design tools, brand guides or anything that doesn't speak HSL.
The conversion first finds the color's chroma (how far it is from gray) from saturation and lightness, places it on the hue wheel to get red, green and blue, then rounds each to a whole number from 0 to 255 and writes it in base 16. Because of that rounding, very close HSL values can map to the same hex code.
It's a handy companion to hand-tuning colors in HSL: adjust in HSL, where changes are intuitive, then hand off the hex code, which every tool understands.
Popular uses
- Exporting colors tuned in CSS HSL to a design tool
- Turning HSL values from a tutorial into hex
- Documenting a theme's colors in a style guide
- Checking which hex code an HSL value produces
Tips for the best result
- Lightness 0% is always black and 100% always white, whatever the hue.
- Hue 360 is the same as 0 (red); values are wrapped around the wheel.
- If two HSL values give the same hex code, they're closer than one hex step apart.
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.