Free RGB to HSL Converter
Convert RGB values or HEX color codes to HSL format. Get hue, saturation, and lightness values for CSS.
Free, no signup — enter RGB values like 124, 58, 237 or a HEX code like #7c3aed to get the HSL equivalent instantly.
Color Preview
rgb(124, 58, 237)
Editing is a pain in the ass, right?
That's why we're building Cubix. No more editing hell.
AI Video Editor
Drop your footage, tell it what you want. Cubix cuts, captions, color grades, and exports — fully on its own. No timeline. No manual work. Just results.
Cinematic Screen Recorder
Hit record on Windows. Auto-zoom, cinematic backgrounds, and studio-quality audio kick in automatically — your screen recording looks edited before you've touched a thing.
How to Convert RGB to HSL
Get CSS-ready HSL values from any RGB or HEX color in three steps.
Enter RGB or HEX
Type RGB values like 124, 58, 237 or paste a HEX code like #7c3aed.
Read the HSL Values
Instantly get hue (0–360°), saturation (0–100%), and lightness (0–100%) for CSS.
Preview & Copy
Confirm the color in the live swatch, then copy the ready-to-paste hsl() value.
/* rgb */
rgb(124, 58, 237)
/* hsl */
hsl(271, 84%, 58%)
RGB & HEX Input
Convert from RGB integers (0–255 per channel) or from a HEX color code in #RRGGBB format.
HSL Output
Get the hue (0–360°), saturation (0–100%), and lightness (0–100%) values ready to paste into CSS.
Color Preview
See a live color swatch of your converted color to visually confirm the result before copying.
Frequently Asked Questions
What is HSL color format?
HSL stands for Hue, Saturation, and Lightness. It represents colors in a cylindrical model where hue is the color angle (0–360°), saturation is the intensity (0–100%), and lightness is the brightness (0–100%).
Why use HSL instead of RGB?
HSL is more intuitive for designers. You can easily create lighter or darker shades by adjusting lightness, or more/less saturated versions by adjusting saturation — without touching the hue.
How do I use HSL in CSS?
Use the hsl() function: color: hsl(271, 81%, 56%);. Modern CSS also supports hsl(271deg 81% 56%) and the oklch() space for perceptual accuracy.
Can I convert a HEX code instead of RGB?
Yes. Enter a HEX code in #RRGGBB format and the converter outputs the equivalent HSL values, with a live color swatch to confirm the result.
Is the RGB to HSL converter free?
Yes. It is completely free with no signup, and every conversion runs instantly in your browser.
Related design tools
Build palettes, convert HEX and RGB, generate gradients, and check contrast.