Convert any HEX color code to HSL — hue, saturation, lightness — instantly
Paste a HEX color code and get the exact HSL values and CSS-ready hsl() string. Useful when you need to tweak color brightness or saturation in CSS or Tailwind. Supports 3-digit and 6-digit hex codes.
Need HEX ↔ RGB ↔ HSL ↔ OKLCH all at once?
Open the full Color Converter →HSL (Hue-Saturation-Lightness) makes color manipulation intuitive. To lighten a color, increase L. To desaturate, decrease S. To shift the hue, change H. This is why Tailwind CSS, CSS variables, and design systems often expose colors in HSL: it becomes trivial to generate shades like hsl(217, 91%, 30%) for dark or hsl(217, 91%, 80%) for light variants of the same hue.
HSL exposes hue, saturation, and lightness as separate controls, making it easy to programmatically create tints, shades, and complementary colors from a single base hex value.
H (Hue) is the color angle 0°–360°. S (Saturation) is the intensity from 0% (grey) to 100% (vivid). L (Lightness) goes from 0% (black) through 50% (the color) to 100% (white).
Yes, hsl() is supported in all browsers. Modern CSS also accepts commaless syntax: hsl(217 91% 60%).
OKLCH is perceptually uniform (equal L = equal perceived brightness), while HSL is not. For accessible color palettes and design tokens, OKLCH is more reliable. Use the full converter to compare both.