RGB to HSL Color Converter
FreeConvert RGB color values to HSL. Enter rgb(59, 130, 246), get hsl(217, 91%, 60%). Free, browser-based, no signup.
What's next
Settings guide
RGB to HSL algorithm overview (no math required):
The conversion finds the maximum and minimum of the R, G, B values, then:
- ·Lightness = average of max and min, scaled to 0–100%.
- ·Saturation = how far the max and min differ, scaled relative to the lightness.
- ·Hue = which channel is the max determines the starting angle (red=0°, green=120°, blue=240°), then the difference between the other two channels shifts it precisely.
Practical output interpretation:
| HSL Result | What it means |
|---|---|
| S = 0% | A pure gray — hue is meaningless |
| L = 0% | Black regardless of H and S |
| L = 100% | White regardless of H and S |
| L = 50%, S = 100% | The most vivid version of that hue |
| L = 30%, S = 80% | A dark, fairly saturated version |
Format comparison
RGB vs HSL for code: If your code receives RGB from an image library or API and needs to create lighter/darker variants, convert to HSL first. Changing L is more predictable than proportionally scaling R, G, B — especially near the extremes.
RGB vs HSL for design tokens: Most design systems store final values as HEX or RGB, but define the scale in HSL. Tailwind's color palette was designed with HSL logic even though it publishes HEX values. Working in HSL then outputting HEX/RGB gives you systematic, predictable palettes.
RGBA vs HSLA: The alpha channel behaves identically in both. The choice between rgba() and hsla() is purely about which color model you prefer for the non-alpha channels. rgba(59, 130, 246, 0.5) and hsla(217, 91%, 60%, 0.5) are the same color.
How it works
Enter RGB
Type R, G, B values (0–255 each). Add Alpha (0–1) for RGBA → HSLA conversion.
Convert
The tool calculates lightness from the channel range, saturation from the contrast, and hue from which channel dominates.
Copy
Copy the hsl() or hsla() value, or copy H, S, L individually for use in design system tokens.
About this format
RGB to HSL conversion is the bridge between color data from APIs, image libraries, and server-side code (which typically uses RGB integers) and CSS properties where HSL gives you semantic control. RGB values like rgb(59, 130, 246) tell you nothing about whether the color is warm or cool, vivid or muted. HSL values like hsl(217, 91%, 60%) tell you it's a blue (217°), quite saturated (91%), and moderately bright (60%).
This matters for dynamic theming. When a user sets a brand color and your application needs to generate a hover state (slightly darker), a disabled state (desaturated), and a light background tint, HSL arithmetic is far simpler than RGB arithmetic. Convert the input RGB to HSL, adjust L and S, convert back.
RGBA values with an alpha channel convert to HSLA. The alpha value passes through unchanged — only the color channels are transformed.