Enter a HSL color below to get the exact RGB value instantly, plus every other format, right in your browser.
When you need HSL to RGB
Colors are often generated in HSL because rotating the hue is trivial: a loop from 0 to 359 gives a full color wheel, and fixed saturation and lightness keep the steps visually related. But hardware and low-level APIs rarely speak HSL. LED strips driven through a channel setter, Canvas pixel buffers, game engines and many image libraries need red, green and blue numbers. Convert here to see what your generator should output, or to verify a function you wrote.
Typical uses
- Checking the RGB output of a hue loop before sending it to an LED strip that takes three-channel colors.
- Writing pixels into a Canvas ImageData buffer or a game texture, which store red, green and blue bytes.
- Comparing your own hsl-to-rgb function against a known good result in a unit test.
How to convert HSL to RGB
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
- C = (1 − |2L − 1|) × S = (1 − |2 × 0.4 − 1|) × 0.75 = 0.6
- X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.6 × (1 − |(190 ÷ 60) mod 2 − 1|) = 0.5
- m = L − C ÷ 2 = 0.4 − 0.6 ÷ 2 = 0.1
- 180° ≤ H < 240°: (R′, G′, B′) = (0, X, C) = (0, 0.5, 0.6)
- R = (R′ + m) × 255 = (0 + 0.1) × 255 = 25
- G = (G′ + m) × 255 = (0.5 + 0.1) × 255 = 153
- B = (B′ + m) × 255 = (0.6 + 0.1) × 255 = 179
hsl(190, 75%, 40%) = rgb(25, 153, 179)
Tip: When testing your own function, check the corner cases: hsl(0 100% 50%) must give rgb(255 0 0), hsl(120 100% 50%) must give rgb(0 255 0), hsl(240 100% 50%) must give rgb(0 0 255), and any color at 0% lightness must be black.
Common colors: HSL to RGB
| Color | HSL | RGB |
|---|---|---|
| Red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| Orange | hsl(39, 100%, 50%) | rgb(255, 165, 0) |
| Yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| Lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| Green | hsl(120, 100%, 25%) | rgb(0, 128, 0) |
| Cyan | hsl(180, 100%, 50%) | rgb(0, 255, 255) |
| Teal | hsl(180, 100%, 25%) | rgb(0, 128, 128) |
| Blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| Navy | hsl(240, 100%, 25%) | rgb(0, 0, 128) |
| Purple | hsl(300, 100%, 25%) | rgb(128, 0, 128) |
| Magenta | hsl(300, 100%, 50%) | rgb(255, 0, 255) |
| Pink | hsl(350, 100%, 88%) | rgb(255, 192, 203) |
| Brown | hsl(0, 59%, 41%) | rgb(165, 42, 42) |
| Gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |
| Black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| White | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
Frequently asked questions
How can I pick evenly spaced colors for a chart?
Divide 360 by the number of series and step the hue by that amount, keeping saturation and lightness fixed: 0, 60, 120 and so on for six series. Convert each triple here. Equal angles are not always equally distinguishable, so check the palette for color-vision accessibility.
Should I enter saturation and lightness as 0-1 or 0-100?
This page uses percent, as CSS does: 0-100 for saturation and lightness, 0-360 for hue. Libraries such as Python colorsys use fractions from 0 to 1 for all three, hue included, so divide by 360 and by 100 when moving values across.
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 →