Tiny Toolkit

HEX to HSL Converter

Convert any HEX color code to HSL (hue, saturation, lightness) instantly. HSL is far more intuitive than HEX for design work: adjusting lightness brightens or darkens a color without changing its hue, and saturation controls vividness independently. Enter a hex code and get HSL, HSLA, RGB, and RGBA in one step.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

What do hue, saturation, and lightness mean?
Hue is the color angle on the color wheel (0 to 360 degrees, where 0 and 360 are red, 120 is green, 240 is blue). Saturation is the intensity of the color from 0% (gray) to 100% (vivid). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure color.
Does this only accept HEX input?
No. You can paste any CSS color format: HEX, RGB, RGBA, HSL, HSLA, or a named color. The tool outputs all six formats simultaneously, including HEX, RGB, RGBA, HSL, and HSLA, each with a copy button.
Why is HSL more useful than HEX for design?
HSL makes it easy to create color variations. To darken a color, reduce lightness. To mute it, reduce saturation. With HEX or RGB, achieving the same effect requires recalculating all three channels.
Can I use HSL values directly in CSS?
Yes. HSL is a native CSS color format. You can write hsl(239, 84%, 67%) directly in any CSS property that accepts a color value. Modern browsers support it fully.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.