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 – CSS color converter
HSL lets you adjust hue, lightness, and saturation independently — the format CSS custom properties and design systems rely on.
ADVERTISEMENT
ADVERTISEMENT
Loading tool editor...
When do you need RGB to HSL?
HSL (Hue, Saturation, Lightness) is the color format that modern design systems rely on. Tailwind CSS v3/v4 expresses its entire palette in HSL-derived tokens. Material Design 3 uses HSL-based tonal palettes. CSS custom properties like --color-primary: hsl(217, 91%, 60%) are readable, maintainable, and easy to adjust.
When you receive brand colors from a client as RGB values — say rgb(59, 130, 246) from a Figma file — converting to HSL lets you generate a full tonal scale. Increase L% for lighter variants, decrease L% for darker ones, adjust S% for muted states. No guesswork.
WCAG accessibility audits require specific contrast ratios. HSL makes it straightforward: tweak L% until the foreground/background pair passes AA or AAA threshold without changing the hue at all.
All calculations run locally in your browser — no data 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?
Tailwind & design tokens
Express brand colors as HSL custom properties —--brand-500: hsl(217, 91%, 60%)— so Tailwind config and CSS tokens stay in sync.CSS variables & dark mode
Switch between light and dark themes by adjusting L% only. No hue shift, no saturation change — consistent brand across modes.WCAG accessibility audits
Nudge L% until your foreground/background pair passes contrast ratio 4.5:1 (AA) or 7:1 (AAA) without changing the hue.Figma & Sketch workflows
Export HSL values directly from converted RGB to populate Figma color styles or Sketch shared swatches for your design system.
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.
ADVERTISEMENT
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
What is HSL and why use it instead of RGB?
HSL stands for Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Unlike RGB, where changing one channel shifts multiple perceived properties, HSL lets you adjust one dimension at a time. It is the preferred format for CSS custom properties, Tailwind color tokens, and Material Design tonal palettes.
How do I create a tonal palette from one HSL color?
Keep H and S constant, then generate steps at L: 95%, 80%, 65%, 50%, 35%, 20%, 10%. This produces a complete light-to-dark scale — the same approach Tailwind CSS uses for its built-in color shades.
How do I use HSL for dark mode in CSS?
Define your color as a CSS custom property: --brand: hsl(217, 91%, 60%). In your dark-mode media query, override only the L value: --brand: hsl(217, 91%, 75%). The hue stays identical, the color becomes readable on dark backgrounds.
How do I darken a color in HSL?
Reduce the L value. hsl(200, 80%, 50%) → hsl(200, 80%, 30%) gives a darker version of the same blue. This is more predictable than adjusting RGB channels, which can shift perceived hue.
Is HSL the same as HSV or HSB?
No. In HSL, L=50% is a pure saturated color and L=100% is white. In HSV/HSB, V/B=100% is pure color and V/B=0% is black. Figma uses HSB internally, while CSS uses HSL. They produce different numeric values for the same color.
What is the complementary color in HSL?
Add 180° to the hue. hsl(200, 80%, 50%) → hsl(20, 80%, 50%) is the complementary color. Triadic colors are at +120° and +240°. This makes HSL ideal for building color scheme generators.
Are my color values sent anywhere?
No. All RGB to HSL calculations run entirely in your browser using JavaScript. Nothing is sent to any server. The tool works offline once the page is loaded.
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.