RGB to HSL Converter

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

Loading...
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.

About This Tool

The RGB to HSL Converter transforms red, green, and blue color values into the hue, saturation, and lightness color model. HSL is often preferred by designers because it maps more naturally to how humans perceive color - you can independently adjust how vivid a color is or how light or dark it appears.

RGB defines color by mixing light intensities, which can feel unintuitive when you want to create lighter or darker variations of a hue. HSL solves this by separating the color wheel position (hue, 0-360 degrees), the vibrancy (saturation, 0-100%), and the brightness (lightness, 0-100%) into distinct controls.

This tool is especially useful when building CSS color schemes, creating accessible color palettes, or adjusting existing colors. You can input any valid RGB values and instantly see the corresponding HSL representation along with a live preview of the color.

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.

Frequently Asked Questions

HSL is more intuitive for color manipulation. To make a color lighter, you increase lightness. To desaturate, you decrease saturation. In RGB, achieving the same effects requires adjusting all three channels simultaneously.
Hue is the color angle on the color wheel (0-360 degrees, where 0 is red, 120 is green, 240 is blue). Saturation is the vibrancy from 0% (gray) to 100% (full color). Lightness ranges from 0% (black) through 50% (pure color) to 100% (white).
Yes. The hsl() and hsla() CSS functions are supported in all modern browsers and have been widely supported since Internet Explorer 9. They are safe to use in any web project.
The hue is determined by which RGB component is dominant. The formula normalizes RGB values to 0-1, finds the maximum and minimum, and calculates the angle based on the differences between channels.

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 color wheel with precision.

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