Hex to HSL Color Converter
Convert a CSS hex color code to HSL (hue, saturation, lightness) in one click.
How to use this tool
- Enter a 6-digit hex color code (e.g. #ff5733). A leading # is optional.
- The tool converts it to HSL: hue in degrees, saturation and lightness as percentages.
- Copy the hsl() string into your CSS or stylesheet.
Paste a hex color code and get the equivalent HSL value for use in CSS hsl() functions or design tools.
Frequently asked questions
- Why convert hex to HSL?
- HSL is easier to reason about when adjusting brightness or saturation. You can keep the hue fixed and tweak saturation/lightness to create tints and shades.
- Does this support 3-digit hex?
- Yes — #abc is treated as #aabbcc.