HEX ↔ HSL Converter
Convert colors between HEX and HSL in both directions with a live preview. Pick a color or type a value — everything runs locally.
Color
LocalHSL
About HEX ↔ HSL Converter
The HEX HSL Converter changes colours between HEX and HSL in both directions with a live preview. It is for designers who think in hue, saturation, and lightness and need HEX for the web.
HSL makes it easy to adjust a colour intuitively, but the web often wants HEX. Converting locally bridges the two instantly, with a swatch to verify.
Step by step
- Pick a colour, or type a HEX or HSL value.
- The other format is calculated automatically.
- Check the preview swatch.
- Copy the value you need — HEX ↔ HSL.
What it offers
- Two-way HEX and HSL conversion
- Live colour preview — HEX ↔ HSL
- Picker and manual entry
- Generated locally — HEX ↔ HSL
Where it helps
- Adjusting lightness in HSL then exporting HEX
- Creating lighter or darker variants of a colour
- Converting an HSL value from a design system to HEX
- Understanding a HEX colour in HSL terms
Tips for best results
- Use HSL to create consistent lighter and darker shades by changing lightness only.
- Remember hue is an angle in degrees, not a percentage.
- Switch to hsla when you need transparency.
Pitfalls to watch for
- Treating HSL hue as a percentage; it is an angle from 0 to 360 degrees.
- Confusing saturation and lightness, which produces a very different colour.
- Expecting HSL to include opacity, which needs hsla instead.
Why people use it
Intuitive edits
HSL makes lightness and saturation easy to tune.
Two-way
Convert to and from HEX.
Visual check
A swatch confirms the result.
Private
Conversion runs in the browser.
Common questions
This runs entirely in your browser
No file or text you enter here is uploaded. Encoding and decoding happen on your device using native browser APIs — close the tab and nothing remains on a server.