Convert RGB to HSL

Convert RGB values to hue, saturation and lightness.

RGB colour

#4F46E5

HSL

hsl(243.4, 75.4%, 58.6%)

Hue

243.4°

Position on the colour wheel

Saturation

75.4%

0% grey to 100% vivid

Lightness

58.6%

0% black to 100% white

#F3F2FC50

#E7E6F9100

#C3C0F6200

#9D98F1300

#6E67EA400

#443AE3500

#291ED7600

#2219B3700

#1B148F800

#140F6B900

#110E3F950

HSL makes adjustment predictable: keep the hue and vary the lightness to build a full tint and shade scale, as shown above.

What does RGB to HSL Converter do?

Convert RGB to HSL, the colour model that makes adjustment intuitive: change lightness to get a tint or shade, change saturation to mute or intensify, keep hue to stay on-brand.

How to Use RGB to HSL Converter

1
Enter the RGB valuesOr paste an rgb() string.
2
Read the HSL resultHue in degrees, saturation and lightness as percentages.
3
Explore variationsAdjust lightness to generate a whole scale.

Key Features

HSL values with a live swatch
Hue shown on a colour wheel for context
Generated tints and shades from the same hue
CSS hsl() output ready to paste
Alpha channel supported

Frequently Asked Questions

What do the HSL numbers mean?

Hue is an angle from 0 to 360 on the colour wheel — 0 red, 120 green, 240 blue. Saturation is 0% grey to 100% fully vivid. Lightness is 0% black through 50% pure colour to 100% white.

Why use HSL instead of RGB?

Because it maps to how people think about colour. Making something "a bit lighter" means changing one number in HSL, but all three in RGB in a non-obvious way.

How do I create a colour scale?

Fix the hue and vary the lightness from about 95% down to 15%. That produces the 50-to-950 style ramp used by modern design systems, and this tool generates it for you.