HSL to RGB — Convert HSL Colors to RGB Values
Convert HSL color values to RGB. Live swatch preview, runs entirely in your browser. No uploads, no accounts, no limits.
HSL to RGB
Convert HSL color values to RGB online. Enter HSL like 30,100,50 and get RGB. Works entirely in your browser.
HSL is the color model designers reach for first because it matches how people describe color: pick a hue, decide how vivid it should be, then push it lighter or darker. The CSS Color Module Level 3 added hsl() and hsla() as first-class citizens in 2011, and every modern browser renders them. RGB is the color model software uses — every pixel on every screen is described by the intensity of its red, green, and blue subpixels, and every drawing API (HTML canvas, WebGL, server-side image libraries) takes RGB triplets. Converting between the two is a daily chore in front-end work, and the conversion has two distinct shapes depending on which direction you are going.
The math is straightforward. Hue becomes a position on the color wheel and selects the base color; saturation scales that color from neutral gray toward full intensity; lightness moves the color toward black (L=0) or white (L=100). At L=50% and S=100%, the color is the fully saturated version of the hue. The conversion to RGB runs each hue through a piecewise function that produces three channels, then applies the lightness and saturation factors to land at integer values in 0-255. The output here is the exact CSS-compatible RGB string that browsers render.
For a final hand-off: if the destination is a CSS file, the rgb() output is interchangeable with the original hsl() value and either works in every browser. If the destination is a drawing API or an image-processing library, the RGB triplet is the only acceptable form. If the destination needs perceptual uniformity (matching colors that look equally bright, picking accessible contrast pairs), HSL is the wrong starting point — OKLCH or CIELAB are the right models, and the Color Converter handles both.
How to use
Enter H, S, and L values
Type hue (0-360), saturation (0-100%), and lightness (0-100%). The output updates as you type; the swatch panel reflects the computed RGB color in real time.
Read the RGB breakdown
The output shows red, green, and blue channels (0-255 each). The footer indicates the assumed sRGB color space and the alpha channel when present.
Copy the RGB string
Copy as CSS-ready `rgb(59, 130, 246)` or `rgba(59, 130, 246, 1)` declarations. Paste into stylesheets, design tools, or CSS-in-JS template literals.
Frequently asked
What does each HSL channel mean?
Hue (0-360) selects a position on the color wheel — 0 is red, 120 is green, 240 is blue. Saturation (0-100%) controls the intensity from pure gray at 0 to fully saturated color at 100. Lightness (0-100%) sets how close to white or black the color is, with 50% being the most saturated.
Does HSL match what Photoshop's color picker shows?
Yes — Photoshop's HSB (Hue, Saturation, Brightness) picker is conceptually similar but uses brightness instead of lightness. CSS HSL uses lightness, where 50% L is the most saturated color; HSB uses brightness, where 100% B is the most saturated.
Why does my hand-picked HSL look different in RGB form?
HSL is a perceptual model, not a perceptual match. Two HSL colors with the same L value can have very different visual weights — a vivid blue at HSL(240, 100%, 50%) looks darker than a vivid yellow at HSL(60, 100%, 50%). RGB triplets in the output preserve the math, not the perceived brightness.
Can I round-trip the value back to HSL?
Yes — the conversion is lossless within 8-bit precision. The RGB-to-HSL tool reads the RGB output, recomputes hue, saturation, and lightness, and lands within ±1 on each channel due to rounding to integer RGB values.
What happens with H values outside 0-360?
The input is normalized modulo 360. HSL(720, 50%, 50%) is the same color as HSL(0, 50%, 50%). Negative hue values wrap forward — HSL(-120, 50%, 50%) is the same as HSL(240, 50%, 50%). The output RGB is identical for the wrapped and original values.
Limitations
- sRGB onlyThe tool assumes sRGB color space, which is the default for web CSS. HSL values that target Display P3 or Rec.2020 are interpreted as sRGB, which clips out-of-gamut channels to the nearest in-gamut color.
- 8-bit precisionRGB output is rounded to integers in 0-255 per channel. For wide-gamut or print workflows that need 16-bit per channel precision, use a tool that emits floating-point RGB triplets.
- No perceptual lightnessHSL's lightness axis is not perceptually uniform. A color at L=20% is not visually twice as dark as one at L=40%. For perceptually accurate lightness, use OKLCH or CIELAB.
Platform notes
- macOS
- Digital Color Meter reads the color under the cursor as RGB or as a generic HSL. The browser tool is the right pick for HSL values from a design file that need to become RGB triplets for canvas, WebGL, or older CSS.
- Windows
- PowerToys' Color Picker copies any pixel as HEX, RGB, or HSL. The browser tool is the right pick for HSL values from a CSS file, a Figma export, or a design system that need to land as RGB declarations in legacy stylesheets.
- Linux
- GIMP's color picker shows HSL and RGB. For command-line work, ImageMagick can output HSL via `convert -colorspace HSL`. The browser tool is the right pick for batch conversion of HSL values pulled from a design export.
- Web
- Runs entirely client-side. Works offline once the page has loaded. The output is a valid CSS `rgb()` value — paste it into any stylesheet, CSS-in-JS template, or canvas API call.