1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
Convert RGB to HSL
This converter converts RGB color values to HSL. Enter values and the result appears instantly.
Loading tool editor...
When do you need to convert RGB to HSL?
HSL (Hue, Saturation, Lightness) is an alternative way to specify colors that is more intuitive for humans. Hue is the color angle (0–360°), Saturation is the color intensity (0–100%), and Lightness is how light/dark (0–100%).
HSL makes it easy to create color variations: adjust lightness for tints/shades, adjust saturation for muted/vivid versions, or shift hue for complementary colors.
CSS supports hsl() natively: hsl(14, 100%, 60%) is equivalent to rgb(255, 87, 51) and #FF5733.
All calculations run locally in your browser — nothing is sent to any server.
How to use the converter?
2. Read the result
The conversion result appears instantly in the field next to it – no clicking required.3. Copy or reverse
Click Copy result or use the Reverse button to convert in the opposite direction.
When is this converter useful?
Color Palettes
Create variants: adjust L (lightness) while keeping H and S constant.CSS
hsl(217, 91%, 60%)— intuitive color notation.Dark Mode
Change L from 95% to 10% to create a dark theme variant.Design
HSL makes it easy to build consistent palettes: rotate H by 120° = complementary color.
What makes this converter different?
Complete privacy
All calculations run locally in your browser. No data is sent to any server.Real-time results
The result updates instantly as you type – no need to click any button.Bidirectional conversion
The Reverse button lets you convert in both directions with one click.Reference table
A ready-made table with commonly converted values and contextual descriptions.
How does RGB to HSL conversion work?
Normalize R, G, B to 0–1. Find max and min channel values. L = (max + min) / 2. S depends on L: if L ≤ 0.5, S = (max−min)/(max+min); if L > 0.5, S = (max−min)/(2−max−min).
Hue depends on which channel is max: if R is max, H = (G−B)/(max−min); if G is max, H = 2 + (B−R)/(max−min); if B is max, H = 4 + (R−G)/(max−min). Multiply by 60°.
HSL is fully reversible — converting HSL back to RGB produces the exact same color.
Practical tips
- Red: hsl(0, 100%, 50%). Green: hsl(120, 100%, 50%). Blue: hsl(240, 100%, 50%).
- Complementary color: add 180° to hue. Red (0°) → Cyan (180°).
- Lighten: increase L%. Darken: decrease L%. L=0% = black, L=100% = white.
- Desaturate: decrease S%. S=0% = grayscale. S=100% = pure color.
RGB vs HSL – comparison
| Feature | RGB | HSL |
|---|---|---|
| Model | Additive channels | Hue/Saturation/Lightness |
| Values | 0–255 per channel | H: 0–360°, S/L: 0–100% |
| Intuitive | Hard to predict colors | Easy to adjust colors |
| Color theory | Not color-wheel based | Maps to color wheel |
| CSS support | rgb(R, G, B) | hsl(H, S%, L%) |
RGB
- Model
Additive channels - Values
0–255 per channel - Intuitive
Hard to predict colors - Color theory
Not color-wheel based - CSS support
rgb(R, G, B)
HSL
- Model
Hue/Saturation/Lightness - Values
H: 0–360°, S/L: 0–100% - Intuitive
Easy to adjust colors - Color theory
Maps to color wheel - CSS support
hsl(H, S%, L%)
Convert RGB to other units
Explore other unit converters
Frequently asked questions
Help us improve our tools
Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.