Tiny Toolkit

RGB to HSL Converter

Convert RGB color values to HSL (hue, saturation, lightness) and HEX. HSL makes it easy to create color variations: lighten by increasing lightness, desaturate by lowering saturation, or shift the hue while keeping the same vibrancy. Enter any RGB values and get HSL, HEX, RGBA, and HSLA in one place.

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

Frequently Asked Questions

Why would I convert RGB to HSL?
HSL is more intuitive for design work. Once you have an HSL value, creating a lighter shade means increasing lightness, and muting a color means decreasing saturation. Neither adjustment is obvious from an RGB value.
Does this only accept RGB input?
No. The input accepts any CSS color format: RGB, RGBA, HEX, HSL, HSLA, or a named color like 'tomato'. All six output formats are shown simultaneously regardless of what you enter.
What is the hue value in HSL?
Hue is the color's position on the color wheel, expressed in degrees from 0 to 360. Red is at 0 (and 360), green at 120, and blue at 240. Values in between represent blends: 60 is yellow, 180 is cyan, 300 is magenta.
Can I use the output HSL value directly in CSS?
Yes. HSL is a native CSS color format supported in all modern browsers. Copy the hsl() or hsla() value from the output and paste it directly into any CSS property that accepts a color.

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.