RGB to HSL Converter: Hue & Lightness Values
Convert RGB values to HSL (Hue, Saturation, Lightness).
Last updated
Contrast on white & black
WCAG 2.1 contrast ratio of #2563EB 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
RGB defines colors as a mix of red, green, and blue light, a model that mirrors how displays work but is not particularly intuitive for humans. HSL (Hue, Saturation, Lightness) reorganizes the same information into a cylindrical model that is much easier to reason about: hue is the color on the wheel (0–360 degrees), saturation is vibrancy (0–100%), and lightness is brightness (0–100%).
HSL is widely supported in modern CSS via the hsl() function and is the preferred format when you want to create color variations programmatically. For example, you can darken a button hover state by simply reducing lightness, or desaturate a background without changing its hue. These tasks are awkward in RGB.
This tool converts any RGB triplet to its HSL equivalent in real time. It is useful for front-end developers building design systems, for creating accessible color palettes with consistent lightness, and for anyone who prefers to think about color in terms of tint, shade, and tone. Once you have your HSL palette, verify that your color pairings meet accessibility standards with the Color Contrast Checker.
Worked examples
Real conversions this tool produces — enter the inputs to reproduce each result.
Finding the hue angle of a brand blue
Input
- Red (R)
- 37
- Green (G)
- 99
- Blue (B)
- 235
Result
- Hue (H)
- 221°
- Saturation (S)
- 83%
- Lightness (L)
- 53%
221° puts this squarely in the blue arc (210–250°). To build a tint for hover states, keep H and S and just raise L — that's the whole reason to work in HSL.
A pure orange in HSL terms
Input
- Red (R)
- 255
- Green (G)
- 102
- Blue (B)
- 0
Result
- Hue (H)
- 24°
- Saturation (S)
- 100%
- Lightness (L)
- 50%
100% saturation and 50% lightness is a colour at full purity — the most vivid version of that hue. Push lightness past 50% and saturation has to fall.
An emerald green
Input
- Red (R)
- 16
- Green (G)
- 185
- Blue (B)
- 129
Result
- Hue (H)
- 160°
- Saturation (S)
- 84%
- Lightness (L)
- 39%
160° is the blue-green border; the 39% lightness is what makes it read deep rather than minty. Two colours can share a hue and look completely different once lightness shifts.
Related content
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 HSL and how is it different from RGB?
HSL stands for Hue, Saturation, Lightness. While RGB defines colors by mixing red, green, and blue light, HSL describes colors the way humans think about them: by their hue (color), vibrancy (saturation), and brightness (lightness). Both describe the same color space.
Is the RGB to HSL conversion lossless?
Yes. RGB and HSL describe the same sRGB color space using different coordinates. You can convert back and forth without losing any color information.
Why use HSL instead of RGB in CSS?
HSL makes it easier to create color variations programmatically. You can darken a color by reducing lightness, desaturate it by lowering saturation, or shift its hue, all without affecting the other properties. The CSS hsl() function is widely supported.
Cite or embed this tool
Cite this tool
PrinterTools. (2026). RGB to HSL Converter: Hue & Lightness Values [online tool]. https://printertools.net/tools/rgb-to-hslEmbed this tool
Paste this on your site to link readers to the free tool. It renders as:
<a href="https://printertools.net/tools/rgb-to-hsl" 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;">RGB to HSL Converter: Hue & Lightness Values — 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.