HEX to HSL
Convert a HEX color to HSL for CSS, with a live preview.
HSL
hsl(183, 100%, 50%)
H 183° · S 100% · L 50%
HEX and HSL color, explained
HSL (hue, saturation, lightness) is often easier to reason about than HEX: adjust lightness for shades and tints, or rotate hue for a palette, without recomputing channels by hand. This converter parses your HEX, derives the RGB channels, and converts to HSL — all in your browser.
Go the other way with HSL to HEX, get RGB via HEX to RGB, or use the all-in-one color converter.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.