RGB to HSL Converter

Convert RGB color values to HSL format. See hue, saturation, and lightness with a live color preview.

RGB to HSL Converter tool

Loading...

Example

Input: Red 196, Green 101, Blue 58

Result: HSL: hsl(19, 54%, 50%), HEX: #C4653A

Lightness is the average of the largest and smallest channel, saturation is their spread relative to lightness, and hue is the angle of the dominant channel (red, leaning toward green) on the color wheel.

RGB to HSL for Common Colors

ColorRGBHSL
Redrgb(255, 0, 0)hsl(0, 100%, 50%)
Orangergb(255, 165, 0)hsl(39, 100%, 50%)
Yellowrgb(255, 255, 0)hsl(60, 100%, 50%)
Greenrgb(0, 128, 0)hsl(120, 100%, 25%)
Tealrgb(0, 128, 128)hsl(180, 100%, 25%)
Bluergb(0, 0, 255)hsl(240, 100%, 50%)
Purplergb(128, 0, 128)hsl(300, 100%, 25%)
Pinkrgb(255, 192, 203)hsl(350, 100%, 88%)
Brownrgb(165, 42, 42)hsl(0, 59%, 41%)
Grayrgb(128, 128, 128)hsl(0, 0%, 50%)

Computed with the converter, rounded to whole numbers. Names follow the CSS named colors.

  1. Enter the red, green, and blue values as integers between 0 and 255 in the respective input fields or use the sliders.
  2. Watch the live color preview swatch update as you type or adjust each channel value.
  3. Read the converted hue (0-360 degrees), saturation (0-100%), and lightness (0-100%) results displayed below.
  4. Copy the HSL output in CSS-ready format such as hsl(11, 100%, 60%) using the copy button.
  5. Use the HSL values to manipulate lightness or saturation independently in your CSS or design workflow.

RGB vs HSL: Why Designers Convert

HSL describes a color by hue, saturation and lightness instead of red, green and blue light. rgb(196, 101, 58) becomes hsl(19, 54%, 50%): an orange hue at 19 degrees, fairly vivid, at medium lightness. Enter any RGB values and this tool gives you the HSL and hex versions.

RGB is how screens make color, but it is hard to edit by feel. To make a color a little lighter in RGB, you have to change all three numbers. In HSL you raise one number, lightness, and the hue stays put. That makes HSL handy for hover states, muted variants and whole color themes in CSS.

Here is what each part means. Hue is an angle on the color wheel: 0 is red, 120 is green and 240 is blue. Saturation runs from 0% (gray) to 100% (full color). Lightness runs from 0% (black) through 50% (the pure color) to 100% (white).

The tool rounds hue to a whole degree and the two percentages to whole numbers, the way CSS usually writes them. Because of that rounding, a round trip can drift by one step. hsl(19, 54%, 50%) converts back to rgb(196, 102, 59), not 101 and 58. For the reverse direction, use the HSL to Hex Converter.

Formula / How It Works

Normalize R, G, B to 0-1. Find max (Cmax) and min (Cmin). L = (Cmax + Cmin) / 2. S = delta / (1 - |2L - 1|). H depends on which channel is Cmax.

Sources

Frequently Asked Questions

Divide each channel by 255 so it runs from 0 to 1. Lightness is the average of the largest and smallest value. Saturation is their difference divided by 1 - |2L - 1|. Hue depends on which channel is largest and how the other two compare, measured in 60-degree sections of the color wheel.
HSL lets you change one property at a time. Keep the hue and saturation and step the lightness to build a set of related shades. Or lower the saturation to mute a color without shifting it. In RGB the same edits need all three numbers to move together, which is much harder to reason about.
Pure red is hsl(0, 100%, 50%), yellow is hsl(60, 100%, 50%) and blue is hsl(240, 100%, 50%). CSS green, rgb(0, 128, 0), is hsl(120, 100%, 25%), because it is only half as bright as pure green. Any gray has 0% saturation, so its hue does not matter.
When red, green and blue are equal, the color has no hue at all. The formula has nothing to measure, so the tool reports hue 0 and saturation 0%. Only lightness matters for grays: rgb(128, 128, 128) is hsl(0, 0%, 50%).
No. They share the hue angle but measure brightness in different ways. In HSL, 100% lightness is always white. In HSB, also called HSV, 100% brightness is the pure color. Many design app pickers use HSB, so their numbers will not match what CSS hsl() expects.

Related Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

HSL to Hex Converter

Convert HSL color values to hexadecimal codes. Enter hue, saturation, and lightness for instant hex output.

Color Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Tools

Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Tools

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA compliance. Ensure your text is readable and accessible.

Color Tools