RGB to HSL
Type red, green and blue values from 0 to 255 to get the matching HSL, HSV (HSB), HWB and HEX values instantly. Every result has a copy button, and the reverse conversion shows whether the rounded HSL turns back into exactly your RGB.
Last updated:
1 = fully opaque; adds a / alpha part to the CSS
How to use the RGB to HSL
- Enter the RGB values. Type red, green and blue from 0 to 255, or click one of the example colors.
- Add alpha if needed. Leave alpha at 1 for a solid color or enter 0-1 for transparency.
- Pick the precision. Whole numbers are fine for CSS; choose 2 decimals for an exact round trip back to RGB.
- Copy the result. Use the Copy buttons next to the CSS HSL, legacy hsl(), HEX, HSV or HWB strings.
- Explore tints and shades. Click any swatch in the lightness ramp to copy its HEX code.
RGB to HSL formula
HSL describes a color by its hue (the angle on the color wheel, 0-360°), saturation (how far it is from grey) and lightness (from black at 0% to white at 100%). The converter uses the standard formula from CSS Color Module Level 4:
- Scale each channel to 0-1: R′ = R / 255, G′ = G / 255, B′ = B / 255.
- Cmax = max(R′, G′, B′), Cmin = min(R′, G′, B′), Δ = Cmax − Cmin.
- L = (Cmax + Cmin) / 2.
- S = 0 if Δ = 0, otherwise S = Δ / (1 − |2L − 1|).
- H = 60° × ((G′ − B′) / Δ mod 6) if Cmax is R′; 60° × ((B′ − R′) / Δ + 2) if Cmax is G′; 60° × ((R′ − G′) / Δ + 4) if Cmax is B′.
HSV/HSB shares the hue; its value is V = Cmax and its saturation is Δ / Cmax.
Common RGB colors in HSL and HSV
| Color | RGB | HSL | HSV / HSB | HEX |
|---|---|---|---|---|
| Red | 255, 0, 0 | 0°, 100%, 50% | 0°, 100%, 100% | #FF0000 |
| Orange | 255, 165, 0 | 39°, 100%, 50% | 39°, 100%, 100% | #FFA500 |
| Yellow | 255, 255, 0 | 60°, 100%, 50% | 60°, 100%, 100% | #FFFF00 |
| Green | 0, 128, 0 | 120°, 100%, 25% | 120°, 100%, 50% | #008000 |
| Cyan | 0, 255, 255 | 180°, 100%, 50% | 180°, 100%, 100% | #00FFFF |
| Sky blue | 135, 206, 235 | 197°, 71%, 73% | 197°, 43%, 92% | #87CEEB |
| Blue | 0, 0, 255 | 240°, 100%, 50% | 240°, 100%, 100% | #0000FF |
| Purple | 128, 0, 128 | 300°, 100%, 25% | 300°, 100%, 50% | #800080 |
| Grey | 128, 128, 128 | 0°, 0%, 50% | 0°, 0%, 50% | #808080 |
| White | 255, 255, 255 | 0°, 0%, 100% | 0°, 0%, 100% | #FFFFFF |
When to use HSL instead of RGB
HSL is easier to adjust by hand: keep the hue and saturation and change only the lightness to build hover states, tints and shades, or rotate the hue by 30° steps for analogous colors. RGB and HEX are what screens and image files store, so convert back with the reverse values when you need exact pixel colors.
Frequently asked questions
How do you convert RGB to HSL?
Divide R, G and B by 255. Find the largest (Cmax) and smallest (Cmin) value and their difference Δ. Lightness L = (Cmax + Cmin) / 2. If Δ = 0 the color is grey (H = S = 0); otherwise S = Δ / (1 − |2L − 1|), and the hue depends on which channel is largest: 60 × ((G − B) / Δ mod 6) for red, 60 × ((B − R) / Δ + 2) for green and 60 × ((R − G) / Δ + 4) for blue.
What is the difference between HSL and HSV (HSB)?
Both use the same hue angle. HSL places pure colors at 50% lightness, with 100% lightness always white. HSV (also called HSB) places pure colors at 100% value, and 100% value with 0% saturation is white. Design tools such as Photoshop and Figma color pickers use HSB, while CSS uses HSL.
Why does converting HSL back to RGB give slightly different numbers?
HSL values are usually rounded to whole degrees and percentages. Rounding can shift a channel by 1 or 2 when you convert back. Choose 2 decimal places and the round trip returns your exact RGB values.
What is RGB 255, 0, 0 in HSL?
Pure red rgb(255, 0, 0) is hsl(0, 100%, 50%) and hsv(0, 100%, 100%).
How do I write HSL in CSS?
Modern CSS accepts hsl(150 39% 30%) with spaces and an optional alpha after a slash, for example hsl(150 39% 30% / 0.5). The older comma syntax hsl(150, 39%, 30%) and hsla(150, 39%, 30%, 0.5) still works in every browser.
What is HWB?
HWB stands for hue, whiteness and blackness. Whiteness is the smallest RGB channel and blackness is 1 minus the largest, both as percentages. It is supported in CSS with hwb() and is easy to adjust by hand.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.