How do I convert RGB to HSL?

Enter red, green, and blue from 0 to 255. The tool computes hue (0-360), saturation (0-100%), and lightness (0-100%) and shows hsl() CSS you can copy. Example: rgb(255, 0, 0) is hsl(0, 100%, 50%).

Can I convert HSL to RGB?

Yes. Edit H, S, or L and the RGB channels, rgb() CSS, HEX, and swatch update at once. Hue wraps at 360; saturation and lightness clamp to 0-100.

What do H, S, and L mean?

Hue is the color angle on the wheel (0 red, 120 green, 240 blue). Saturation is how vivid the color is (0% gray, 100% full color). Lightness is how light it is (0% black, 50% pure, 100% white).

Why is hue 0 for gray?

Grays have 0% saturation, so hue is undefined and this converter reports 0. Changing hue on a gray does nothing until you raise saturation.

Is this the same as HEX to RGB?

No. HEX to RGB Converter is for #rgb / #rrggbb codes, plus CMYK, contrast, and token snippets. This tool is the bidirectional RGB ↔ HSL path. Pair them when a spec mixes HEX and HSL.

Does my color leave the device?

No. The RGB to HSL Converter runs entirely in your browser. Values are not uploaded or stored on a server.

Converter Tools

RGB to HSL Converter

Convert RGB (0-255) to HSL (hue, saturation, lightness) and back in your browser.

rgb(20, 184, 166)hsl(173, 80%, 40%)

RGB

= hsl(173, 80%, 40%)

HSL

= rgb(20, 184, 166)

HEX #14b8a6

About RGB to HSL Converter

Convert RGB (0-255) to HSL (hue, saturation, lightness) and back in your browser. Type any channel, pick a color, or click a preset - the live swatch, rgb() CSS, and hsl() CSS update together. Use it for stylesheets, design tokens, and handoff between tools that speak different color models. Nothing is uploaded.

How to Use RGB to HSL Converter

Enter R, G, and B values from 0 to 255 - or pick a color with the native picker.
Read the matching H, S, and L values (hue 0-360, saturation and lightness 0-100%).
Edit H, S, or L to convert the other way; RGB and the swatch update instantly.
Copy rgb() or hsl() CSS (or HEX) for your stylesheet - no signup required.

RGB to HSL Converter Examples

Pure red

rgb(255, 0, 0) → hsl(0, 100%, 50%).

Tailwind blue-500

rgb(59, 130, 246) → hsl(217, 91%, 60%).

Neutral gray

rgb(128, 128, 128) → hsl(0, 0%, 50%). Hue is 0 because gray has no saturation.

HSL to RGB

hsl(120, 100%, 50%) → rgb(0, 255, 0) (pure green).

Read the full guide

How to Use RGB to HSL Converter: Complete Guide (2026) - 5 min read

Frequently Asked Questions about RGB to HSL Converter

How do I convert RGB to HSL?: Enter red, green, and blue from 0 to 255. The tool computes hue (0-360), saturation (0-100%), and lightness (0-100%) and shows hsl() CSS you can copy. Example: rgb(255, 0, 0) is hsl(0, 100%, 50%).
Can I convert HSL to RGB?: Yes. Edit H, S, or L and the RGB channels, rgb() CSS, HEX, and swatch update at once. Hue wraps at 360; saturation and lightness clamp to 0-100.
What do H, S, and L mean?: Hue is the color angle on the wheel (0 red, 120 green, 240 blue). Saturation is how vivid the color is (0% gray, 100% full color). Lightness is how light it is (0% black, 50% pure, 100% white).
Why is hue 0 for gray?: Grays have 0% saturation, so hue is undefined and this converter reports 0. Changing hue on a gray does nothing until you raise saturation.
Is this the same as HEX to RGB?: No. HEX to RGB Converter is for #rgb / #rrggbb codes, plus CMYK, contrast, and token snippets. This tool is the bidirectional RGB ↔ HSL path. Pair them when a spec mixes HEX and HSL.
Does my color leave the device?: No. The RGB to HSL Converter runs entirely in your browser. Values are not uploaded or stored on a server.

HEX to RGB Converter

Convert HEX to RGB (and back) with HSL, CMYK, a tint-shade ramp, WCAG contrast cards, and a CSS token snippet - free online color code converter.

CM to Inches Converter

Convert centimeters to inches and inches to centimeters instantly. Free online cm to inches converter using 1 inch = 2.54 cm, with precise results in both directions.