RGB to HSL Converter

The RGB to HSL converter turns RGB values like rgb(59, 130, 246) into HSL values like hsl(217, 91%, 60%). Both describe the same color, but RGB does it through three light channels while HSL describes it as Hue, Saturation, and Lightness — a far more intuitive way to tweak and vary a color.

Converting RGB to HSL is the first step when you want to programmatically lighten, darken, or desaturate a color — those operations are simple in HSL but awkward in raw RGB.

Why Convert to HSL

Adjust Brightness

Change lightness alone to make consistent hover, active, and disabled states from one base color.

Control Intensity

Tune saturation to make a color more striking or to mute it for subtle backgrounds.

Harmonious Palettes

Shift the hue in equal steps to create complementary or analogous color schemes.

How to Convert RGB to HSL

Enter the RGB Values

Type your three channels — for example 59, 130, 246. Commas or spaces both work, and you may wrap the values in rgb(...) if you like.

Read the HSL Output

The HSL value is computed instantly as you type, and the live swatch updates so you can verify the color visually.

Or Pick a Color

Click the preview swatch to open the native color picker and select a color visually — the RGB and HSL fields update automatically.

Copy & Reuse

Copy the hsl() string straight into your CSS. The panel below also shows HEX, RGB, HSV, and CMYK.

Features

RGB vs HSL

RGB

Three light channels

Matches how screens emit color
Hard to "lighten" without shifting hue
Values 0–255 per channel

HSL

Human-friendly model

Lightness and saturation are separate dials
Easy tints, shades, and palettes
Hue 0–360°, S and L 0–100%

Real-Time Output

Results update as you type, entirely in your browser.

All Formats at Once

HEX, RGB, HSL, HSV, and CMYK shown together for every color.

Frequently Asked Questions

What's the difference between RGB and HSL?

RGB defines a color by mixing red, green, and blue light. HSL defines the same color by its hue (color type), saturation (intensity), and lightness (brightness) — a remapping of the same data into more intuitive terms.

When should I use HSL?

Use HSL when you need to create color variations — lighter or darker shades, or more or less vivid versions — without changing the base hue. It is ideal for theming and UI states.

Is the conversion accurate?

Yes. The math is precise; the same RGB input always produces the same HSL output. HSL values are rounded to whole numbers for readability, which can differ by a unit on a round-trip but looks identical.

What RGB values are valid?

Each of the three channels must be an integer from 0 to 255. Enter them separated by commas or spaces, with or without the rgb() wrapper.

Can I paste the HSL output straight into CSS?

Yes. The output uses the standard hsl(h, s%, l%) syntax that every modern browser supports, so it drops directly into a stylesheet.