HSL to RGB Converter: CSS Color to RGB
Convert HSL (Hue, Saturation, Lightness) to RGB values.
Last updated
Contrast on white & black
WCAG 2.1 contrast ratio of #2767E7 against a white and a black surface.
AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold); AAA needs 7:1. Use this to choose white or black text over the color.
About this conversion
HSL (Hue, Saturation, Lightness) is a human-friendly color model that lets you pick a color by its position on the color wheel (hue), its vibrancy (saturation), and its brightness (lightness). While HSL is great for designing and adjusting colors, many applications, APIs, and image formats still require RGB values.
You need HSL-to-RGB conversion when you have designed a color palette using HSL notation and need to export the values for use in environments that only understand RGB, such as certain graphics libraries, LED controllers, game engines, or older CSS code. The conversion involves trigonometric mapping from the cylindrical HSL space back to the cubic RGB space.
This tool performs the conversion instantly and shows you both the resulting R, G, B integer values and a live color preview. Adjust the sliders to explore how changes in hue, saturation, and lightness map to changes in the red, green, and blue channels. If you need a HEX code for CSS rather than RGB integers, the RGB to HEX converter takes the output directly.
Worked examples
Real conversions this tool produces — enter the inputs to reproduce each result.
Building an RGB blue from HSL controls
Input
- Hue (H)
- 220°
- Saturation (S)
- 80%
- Lightness (L)
- 53%
Result
- Red (R)
- 39
- Green (G)
- 103
- Blue (B)
- 231
- HEX
- #2767E7
Dialling 220°/80%/53% gives a blue one notch off the brand #2563EB — handy proof that eyeballing HSL sliders rarely hits an exact target hex. Convert, don't guess.
A fully saturated orange
Input
- Hue (H)
- 24°
- Saturation (S)
- 100%
- Lightness (L)
- 50%
Result
- Red (R)
- 255
- Green (G)
- 102
- Blue (B)
- 0
- HEX
- #FF6600
100%/50% is the one combination that returns a channel at full 255 and another at a clean 0 — the purest form of that 24° orange.
Was this page helpful?
Color conversions are mathematical approximations. For critical color work, verify against physical swatch books and printed proofs. See our methodology and full disclaimer.
Frequently Asked Questions
What is the difference between HSL and HSV?
Both use hue and saturation, but they define brightness differently. In HSL, lightness 50% gives the purest color and 100% gives white. In HSV, value 100% gives the brightest version of the hue. HSL is more common in CSS; HSV is more common in image editors like Photoshop.
Can I use HSL values in Photoshop?
Photoshop uses HSB (Hue, Saturation, Brightness), which is the same as HSV, not HSL. If you need values for Photoshop, use the RGB to HSV converter instead.
What does a saturation of 0% mean in HSL?
A saturation of 0% means the color is completely desaturated; it becomes a shade of gray. The lightness value then determines how dark or light that gray is, from black (0%) to white (100%).
Cite or embed this tool
Cite this tool
PrinterTools. (2026). HSL to RGB Converter: CSS Color to RGB [online tool]. https://printertools.net/tools/hsl-to-rgbEmbed this tool
Paste this on your site to link readers to the free tool. It renders as:
<a href="https://printertools.net/tools/hsl-to-rgb" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;background:#ffffff;font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.3;color:#2563eb;text-decoration:none;">HSL to RGB Converter: CSS Color to RGB — free tool by PrinterTools</a>More Print calculators
Browse all print calculators — Color converters for RGB, HEX, CMYK, HSL, HSV, Pantone, RAL, and NCS — plus DPI, paper size, contrast, and ink estimators.