⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

HEX to HSL Converter

Convert any color between HEX, RGB, HSL and CMYK notation with a live preview swatch — right in your browser.

Processing... 0%
Parsing color value
Converting color spaces
Rendering preview
Done

Result

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.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Converts between HEX, RGB, HSL and CMYK color models.
  • Native color picker that fills the value field in the selected format.
  • Live preview swatch plus one-click copy of all four notations.

Key Benefits

✓ One input, every notation: type a color once and read it back as HEX, RGB, HSL and CMYK simultaneously.
✓ Forgiving parser: accepts #fff, #3b82f6, rgb(255, 0, 0), bare "255, 0, 0" triplets and hsl(120, 50%, 50%) alike.
✓ Runs entirely in your browser — color values are never uploaded anywhere.

Use Cases

  • • Turn the #rrggbb code from a brand book into rgb() or hsl() notation before wiring hover and disabled states in CSS.
  • • Convert an on-screen RGB color to CMYK percentages to sanity-check how it will separate before sending business cards or flyers to print.
  • • Eyedrop a color with the built-in picker and copy all four notations at once for a design-to-code handoff.