HSL Converter
Convert hsl() and hsla() colors to HEX, RGB and RGBA, or paste a hex or RGB value and read back its HSL. Everything runs in your browser with a live preview swatch.
Color value
Equivalent color formats
Enter a color value to see the result.
What HSL and hex colors have in common
HSL describes a color by hue, saturation and lightness. Hue is an angle from 0 to 360 on the color wheel, while saturation and lightness are percentages, which makes HSL easier to reason about than raw channel values when you are picking a shade.
This converter also reads the other formats. Paste a hex code or an rgb() value and it shows the matching hsl() and hsla() strings, so you can move between design tools, CSS and JavaScript without guessing.
How to convert HSL to hex
- Type or paste an HSL value such as hsl(217, 91%, 60%) into the input box.
- Press Convert color.
- Check the preview swatch and the HEX, HEX8, RGB, RGBA, HSL and HSLA rows.
- Copy the value you need with the copy button next to that row.
HSL conversion examples
Sky blue from HSL
hsl(217, 91%, 60%)
#3C83F6
HSL with transparency
hsla(217, 91%, 60%, 0.5)
#3C83F680
Hex back to HSL
#3B82F6
hsl(217, 91%, 60%)
UrsaKit vs other HSL converters
| Dimension | UrsaKit | htmlcolorcodes.com | rgbtohex.net |
|---|---|---|---|
| Price | Free | Free with ads | Free |
| Reads hsl() and hsla() | Yes | Yes | No |
| Also converts hex and rgb() back | Yes | Yes | Partial |
| Alpha handling | Yes, hsla() to hex8 | Yes | Partial |
| Copy individual formats | Yes | Partial | No |
| Uploads your color | No | No | No |
Frequently asked questions
What does HSL stand for?
Hue, saturation and lightness. Hue is an angle in degrees, while saturation and lightness are percentages, so hsl(217, 91%, 60%) means hue 217, 91% saturation and 60% lightness.
Can I paste a hex code instead?
Yes. The converter reads hsl(), hsla(), hex, rgb() and rgba() values, so you can start from whichever format you already have.
How is alpha handled?
hsla() takes a fourth value between 0 and 1. It becomes the last two digits of a HEX8 code, so hsla(217, 91%, 60%, 0.5) becomes #3B82F680.
Why does the converted HSL value differ slightly from my input?
Saturation and lightness are rounded to whole percentages, so a value that came from RGB may come back one point off. The color itself stays the same.
Is my input uploaded to a server?
No. Parsing and conversion run in your browser with JavaScript, and no color value is sent anywhere.
Can I convert RGB to hex instead?
Yes. Use the RGB to HEX converter or the HEX to RGB converter linked below to work from those formats directly.