RGB to HSL Converter
What is RGB to HSL Converter
This tool converts RGB values (Red 0–255, Green 0–255, Blue 0–255) to HSL (Hue, Saturation, Lightness). HSL is more intuitive for color manipulation — it's much easier to create lighter or darker versions of a color by adjusting the Lightness value than by modifying individual RGB channels.
How to use
- Enter the Red, Green, and Blue values (0–255) in the RGB fields.
- HSL and HEX values update instantly.
- Click the copy button next to HSL to copy hsl(h, s%, l%) format.
- Switch between all 6 converters using the mode links at the top.
When to use it
Moving a brand color from an old stylesheet into an HSL-based design system? Enter rgb(59, 130, 246) and you get hsl(217, 91%, 60%) back. From there you can drop the lightness to 55% for a hover state and 45% for an active state, all without touching the hue.
Frequently asked questions
What is rgb(255, 0, 0) in HSL?
rgb(255, 0, 0) is hsl(0, 100%, 50%) — pure red. Hue 0° is red, 100% saturation means fully saturated, 50% lightness is the pure mid-tone.
What is rgb(0, 0, 0) in HSL?
rgb(0, 0, 0) is hsl(0, 0%, 0%) — black. Zero lightness is always black.
What is rgb(255, 255, 255) in HSL?
rgb(255, 255, 255) is hsl(0, 0%, 100%) — white. Maximum lightness is always white.
Why is RGB to HSL conversion useful?
HSL makes color relationships visible. If you have rgb(59, 130, 246) you can't tell at a glance how blue or bright it is. But hsl(217, 91%, 60%) immediately tells you it's a blue (217° on the color wheel), highly saturated (91%), and medium-light (60%).
Can I share this tool with my inputs pre-filled?
Yes. The URL updates automatically as you type. Copy it from the address bar or use the Share button — anyone who opens the link will see your exact inputs ready to go.
Related tools
HSL to RGB Converter
Convert HSL color values to RGB instantly. Free HSL to RGB converter with live preview. Turn hsl() values into rgb() for JavaScript, Canvas, and design tools.
Aspect Ratio Calculator
Calculate aspect ratios, find a missing width or height, and resize images or video while keeping the same proportions. Free and instant.
Base64 Decoder
Decode Base64 strings to plain text instantly in your browser. Supports full Unicode output including emojis. Free online Base64 decoder.