HEX to HSL Converter
Convert any color between HEX, RGB, HSL and CMYK notation with a live preview swatch — right in your browser.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the color converter with HEX preselected — paste a code like #3b82f6 and run it to read the same color as hsl(hue, saturation, lightness).
HSL describes a color by hue (0–360°), saturation and lightness, which makes it the most human-friendly CSS notation: darken a button by lowering lightness or build a palette by shifting only the hue — edits HEX digits cannot express readably.
The full converter accepts HEX, RGB or HSL input and returns all four notations at once, with a native color picker and a live swatch — everything happens in your browser, so color values never leave your device.
Example. #ff0000 converts to rgb(255, 0, 0), hsl(0, 100%, 50%) and cmyk(0%, 100%, 100%, 0%).
Limit. The notations are HEX, RGB, HSL and CMYK; Lab and LCH are not in this converter.