---
title: "HEX to HSL Converter - Free Online Tool | CanDoYa"
description: "Free HEX to HSL converter. Type a hex color code like #3366cc and get the hsl() value, a live color preview and one-click copy - right in your browser."
url: https://candoya.com/tools/hex-to-hsl/
locale: en
type: browser-tool
---
# HEX to HSL Converter
Category: Color & Design
## How do I convert HEX to HSL?
First read the hex code as red, green and blue (0-255), then restate that color as hue, saturation and lightness. Hue is the angle on the color wheel (0-360), saturation is how vivid it is (0-100%) and lightness how bright (0-100%). #3366cc becomes hsl(220, 60%, 50%). This tool does it instantly as you type.
The converter accepts every CSS hex form: 6-digit `#3366cc`, 3-digit shorthand `#36c`, and the 4- and 8-digit forms with an alpha channel, with or without the `#`. It shows the `hsl()` or `hsla()` string, the plain values and a per-component breakdown - plus a reverse HSL to HEX row when you need to go the other way. **Everything runs in your browser** - no upload, no account, no limits.
## How to use it
1. **Enter a hex code** - Type or paste a hex color like #3366cc (or #36c), or pick one with the color swatch. The # is optional.
2. **Read the HSL value** - The hsl() string, the plain values and a live color preview update as you type, with a per-component breakdown for hue, saturation and lightness.
3. **Copy the format you need** - Click Copy next to the hsl() string or the raw values. Need the reverse? Enter hue, saturation and lightness below to get the hex code back.
## Who it's for
- **Front-end developers** switching a hex code to hsl() so they can tweak lightness for hover and focus states without picking a whole new color.
- **Designers building palettes** who keep hue fixed and step saturation and lightness to generate tints and shades from one brand color.
- **Theme and design-token authors** storing colors as HSL because it is far easier to read and adjust by hand than a hex string.
- **Anyone matching colors** across tools where one wants hex (Figma, most CSS) and another wants HSL (SCSS helpers, some color systems).
## Expert note
HSL rounds: many colors have no exact integer hue, saturation and lightness, so converting hex to HSL and back can land on a neighbouring hex (for example a value one step off). Store the original hex as your source of truth and treat the HSL as a readable, editable view of it, not a lossless copy.
## Frequently asked questions
### Is this HEX to HSL converter free?
Yes - it's 100% free with no sign-up and no limits. It runs entirely in your browser.
### Are my colors uploaded anywhere?
No. The conversion is plain JavaScript running on your device - nothing is sent to a server, and it keeps working offline once the page is loaded.
### What is HSL?
HSL stands for hue, saturation and lightness. Hue is an angle from 0 to 360 degrees on the color wheel, saturation is how vivid the color is from 0 to 100 percent, and lightness runs from 0 percent (black) through the pure color at 50 percent to 100 percent (white).
### How do you convert hex to HSL by hand?
Convert the hex to red, green and blue and divide each by 255. Take the max and min of the three: lightness is their average, saturation is (max - min) divided by (1 - |2L - 1|), and hue comes from which channel is the max, scaled to 0-360 degrees.
### Does it support 3-digit shorthand like #36c?
Yes. In CSS shorthand each digit is doubled, so #36c expands to #3366cc and converts to hsl(220, 60%, 50%). The 4-digit form works the same way, with the last digit as alpha.
### How does it handle transparency (HSLA)?
An 8-digit hex code carries alpha in its last pair. That byte (0-255) is divided by 255 to get the 0-1 alpha that hsla() expects, rounded to three decimals - so #3366cc80 becomes hsla(220, 60%, 50%, 0.502).
### Can it convert HSL back to HEX?
Yes. Use the HSL to HEX row under the result: enter hue (0-360) plus saturation and lightness (0-100%) and it returns the hex code instantly. Out-of-range values are clamped.
### Why is HSL useful instead of hex?
HSL is human-readable: you can lighten a color by raising L, mute it by lowering S, or shift its family by changing H - all without guessing hex digits. That makes it ideal for building consistent palettes, hover states and design tokens.
## Related tools
- [HEX to RGB Converter](https://candoya.com/tools/hex-to-rgb/)
- [RGB to HEX Converter](https://candoya.com/tools/rgb-to-hex/)
- [Color Contrast Checker](https://candoya.com/tools/color-contrast-checker/)
- [Color Palette Generator](https://candoya.com/tools/color-palette-generator/)
- [Color Picker](https://candoya.com/tools/color-picker/)
---
*Markdown edition of , published for AI agents and other automated readers. Index of key pages: .*