Enter a RGB color below to get the exact HSL value instantly, plus every other format, right in your browser.
When you need RGB to HSL
RGB is what screens and cameras report, but it is a poor format for questions such as how light a color is or which colors are close in hue. Developers convert RGB to HSL when sorting pixels or swatches by hue, writing palette generators, grouping colors into families or desaturating part of an image. Enter the three channel values from a picker, a canvas read or an image library to see the same color in terms that are easy to compare and adjust.
Typical uses
- Sorting a pixel sample or a logo palette by hue to show swatches in rainbow order.
- Writing a script that desaturates or lightens a color by editing only the S or L value.
- Checking whether two RGB colors taken from different screenshots belong to the same hue family.
How to convert RGB to HSL
Normalize R, G and B to the 0-1 range and find max, min and Δ = max − min. Lightness is the average of the extremes: L = (max + min) / 2. Saturation is S = Δ / (1 − |2L − 1|), or 0 for grays (Δ = 0).
Hue depends on which channel is the largest: for red H = ((G − B) / Δ) mod 6, for green H = (B − R) / Δ + 2, for blue H = (R − G) / Δ + 4, each multiplied by 60 to get degrees. The reverse conversion rebuilds the channels from chroma C = (1 − |2L − 1|) × S.
Worked example
- Normalize the channels: R′ = 243 ÷ 255 = 0.953, G′ = 156 ÷ 255 = 0.612, B′ = 18 ÷ 255 = 0.071
- max = 0.953 (R′), min = 0.071 (B′), Δ = 0.882
- L = (max + min) ÷ 2 = (0.953 + 0.071) ÷ 2 = 0.512 → 51%
- S = Δ ÷ (1 − |2L − 1|) = 0.882 ÷ (1 − |2 × 0.512 − 1|) = 0.904 → 90%
- H = 60 × ((G′ − B′) ÷ Δ) = 60 × ((0.612 − 0.071) ÷ 0.882) ≈ 37°
rgb(243, 156, 18) = hsl(37, 90%, 51%)
Tip: Do not choose between black and white text using HSL lightness alone: a yellow and a blue with the same lightness differ greatly in brightness. Use relative luminance from the WCAG contrast formula for that decision, and keep HSL for sorting and adjusting.
Common colors: RGB to HSL
| Color | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Green | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Cyan | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| Blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Navy | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Magenta | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Pink | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Brown | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| Gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Frequently asked questions
Why do pure blue and pure yellow have the same lightness?
Lightness in HSL is the average of the largest and smallest channel, so rgb(0 0 255) and rgb(255 255 0) both come out at 50%, although yellow looks far brighter. HSL lightness is a convenient control, not a measure of perceived brightness.
What should I enter if my library stores channels as 0-1 floats?
Multiply each float by 255 and round. For example a matplotlib color of 0.2, 0.4, 0.8 becomes 51, 102, 204. Python's colorsys works on 0-1 floats directly, but it returns hue, lightness and saturation in that order.
What do hue, saturation and lightness mean?
Hue is the position on the color wheel in degrees (0° red, 120° green, 240° blue). Saturation is how vivid the color is, from 0% gray to 100% pure. Lightness runs from 0% black through 50% pure color to 100% white.
Why use HSL instead of RGB?
HSL is easier to reason about: to darken a color you lower L, to mute it you lower S, keeping the same hue. That makes it convenient for building palettes and tweaking colors in CSS, while in RGB all three channels change at once.
Is the conversion exact?
The formulas are mathematically exact, but displayed values are rounded to whole numbers, so converting back and forth can shift a channel by ±1. For pixel-perfect work keep the original value.
More color converters
Need to grab a color from an image or screenshot? Try the free Pixel Color Picker →