Tiny Toolkit

HSL to RGB Converter

Convert HSL (hue, saturation, lightness) values to RGB and HEX instantly. HSL is often preferred for defining colors in design because it's more intuitive to reason about — you can lighten a color by raising the L value without touching the hue. Enter your HSL values and get every CSS color format in one step.

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

Frequently Asked Questions

Why would I convert HSL to RGB?
Some environments and libraries expect RGB values: canvas APIs, image processing libraries, older design tools, and certain CSS-in-JS setups. Converting from HSL (where you often design) to RGB (where you sometimes need to deliver) is a common workflow step.
Does this only accept HSL input?
No. The input accepts any CSS color format: HSL, HSLA, HEX, RGB, RGBA, or a named color. All six output formats are shown at once so you can copy whichever you need.
What is the valid input format for HSL?
Type a standard CSS HSL value such as hsl(239, 84%, 67%). Hue is a number from 0 to 360, saturation and lightness are percentages from 0% to 100%. HSLA with an alpha value like hsla(239, 84%, 67%, 0.5) is also supported.
Does it support transparency?
Yes. Enter an hsla() value with an alpha channel and the tool outputs RGBA and 8-digit HEX alongside the standard formats. The color preview uses a checkerboard background to show transparency.

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.