Tiny Toolkit

HSL to HEX Converter

Convert HSL color values to a HEX code instantly. Enter hue (0 to 360), saturation (0 to 100%), and lightness (0 to 100%) and get the corresponding hex color code for CSS or design tools. RGB and RGBA outputs are included so you have every format without a second conversion.

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

Frequently Asked Questions

How do I enter an HSL color?
Type an HSL value in CSS format, such as hsl(239, 84%, 67%), directly into the input field. The tool also accepts any other CSS color format: HEX, RGB, RGBA, HSLA, or a named color like 'steelblue'. All six output formats are shown at once.
Why would I need to convert HSL to HEX?
Design tools like Figma and Sketch often expect HEX or RGB. If you've been working with HSL values in CSS and need to hand off a color to a designer or paste it into a tool that expects HEX, this converter handles it instantly.
What is the valid range for each HSL component?
Hue is 0 to 360 (degrees). Saturation and lightness are 0% to 100%. Values outside these ranges are clamped to the nearest valid value.
Does it support HSLA with transparency?
Yes. Enter an hsla() value with an alpha channel and the tool shows HEX with alpha, RGBA, and HSLA in the output. The color preview bar uses a checkerboard background to make transparency visible.

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.