RGB to HSL Converter

Convert RGB into hue, saturation and lightness — useful for theming and adjustments.

About the RGB to HSL Converter

Convert RGB into hue, saturation and lightness — useful for theming and adjustments. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.

How to use

Step 1

Pick a color

Enter a HEX value or use the picker — the tool reads its RGB internally.

Step 2

Convert to HSL

Hue, saturation and lightness are calculated immediately.

Step 3

Compare with HSV

The matching HSV value is shown alongside for reference.

Step 4

Copy the result

Copy the HSL string ready for use in CSS.

Benefits

Easier adjustments

HSL makes lightening, darkening and desaturating a color a single-value change.

Better for theming

Work in hue and lightness to build consistent UI color scales.

Instant and exact

Standard conversion math, computed live in your browser.

Features & supported formats

Features

HEX or picker input
HSL and HSV output
CSS-ready hsl() string
One-tap copy
Live recalculation

Supported formats

RGBHSLHSV

Accuracy & limitations

The RGB-to-HSL formula is exact, but the three numbers it returns are rounded for reading — and the L it gives you is not the same thing as how bright the color looks.

The RGB to HSL formula is exact, but the displayed hue, saturation and lightness are rounded for readability.
Round-tripping HSL back to RGB can therefore land within one unit per channel of where you started.
At zero saturation the hue is mathematically undefined — any gray reports a hue of 0 by convention, not because it is red.
HSL lightness is not perceived brightness. Two colors with the same L value can look very different, so never judge contrast from it.

Frequently asked questions

Why use HSL instead of RGB?

HSL separates color from brightness, so adjusting how light or vivid a color is becomes intuitive rather than guesswork.

What does each HSL value mean?

Hue is an angle from 0–360, saturation is how vivid the color is as a percentage, and lightness is how close to white or black it is.

Is HSL the same as HSV?

No. Both share hue and saturation, but HSL uses lightness while HSV uses value (brightness). The tool shows both.

Can I paste an rgb() string?

Use a HEX value or the picker; the tool derives RGB from there and converts to HSL.

Does CSS support HSL directly?

Yes. Modern browsers accept hsl() values, so you can paste the result straight into your stylesheet.