RGB to HSL Color Converter

Instantly convert Red, Green, Blue (RGB) to Hue, Saturation, Lightness (HSL) color codes. Enter any RGB value and get the HSL equivalent in real time — no signup required.

Color Preview

#6366F1

hsl(239, 84%, 67%)

All formats

HEX

#6366F1

HSL

hsl(239, 84%, 67%)

CMYK

cmyk(59%, 58%, 0%, 5%)

Ad · Leaderboard (728×90)

RGB vs HSL — What's the Difference?

RGB

Red, Green, Blue

Three integer values (0–255) for red, green, and blue light. The native color model for screens, monitors, and digital displays.

Example: color: rgb(99, 102, 241)

HSL

Hue, Saturation, Lightness

Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Designed to be intuitive for humans — great for adjusting color tones in CSS.

Example: color: hsl(239, 84%, 67%)

How to Convert RGB to HSL

L = (max + min) / 2 | S = (max − min) / (1 − |2L − 1|) | H = 60° × sector offset

All conversion math runs in your browser using the sRGB color space. No data is sent to a server.

Common Colors — RGB to HSL Reference Table

ColorRGBHSL
Redrgb(255, 0, 0)hsl(0, 100%, 50%)
Greenrgb(0, 128, 0)hsl(120, 100%, 25%)
Bluergb(0, 0, 255)hsl(240, 100%, 50%)
Whitergb(255, 255, 255)hsl(0, 0%, 100%)
Blackrgb(0, 0, 0)hsl(0, 0%, 0%)
Orangergb(255, 165, 0)hsl(39, 100%, 50%)
Purplergb(128, 0, 128)hsl(300, 100%, 25%)
Yellowrgb(255, 255, 0)hsl(60, 100%, 50%)
Cyanrgb(0, 255, 255)hsl(180, 100%, 50%)
Magentargb(255, 0, 255)hsl(300, 100%, 50%)
Grayrgb(128, 128, 128)hsl(0, 0%, 50%)
Pinkrgb(255, 192, 203)hsl(350, 100%, 88%)

Frequently Asked Questions

How do I convert RGB to HSL?

To convert RGB to HSL: L = (max + min) / 2 | S = (max − min) / (1 − |2L − 1|) | H = 60° × sector offset. Use the converter above to do this instantly for any color value.

What is the RGB color format?

Red, Green, Blue (RGB) — Three integer values (0–255) for red, green, and blue light. The native color model for screens, monitors, and digital displays.

What is the HSL color format?

Hue, Saturation, Lightness (HSL) — Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Designed to be intuitive for humans — great for adjusting color tones in CSS.

Is this RGB to HSL converter free?

Yes. It is completely free, works in your browser with no signup or upload. All color math runs locally.

Can I convert HSL back to RGB?

Yes — use the swap button in the converter above, or visit the HSL to RGB converter page directly.

Ad · Medium Rectangle (300×250)