Convert RGB to HSL instantly — enter red, green, and blue values and get the matching HSL, hex, CMYK, and HSV codes in seconds. No signup required.
RGB
Set red, green, blue (0–255)
HSL
Hue (0–360), Saturation & Lightness (0–100%)
How RGB to HSL Conversion Works
The RGB to HSL formula converts three 0–255 color channels into hue, saturation, and lightness values using a four-step calculation.
- Normalize RGB. Divide each of the R, G, and B values by 255 so they fall between 0 and 1.
- Find the range. Identify the maximum and minimum of the three normalized values. The difference between them (max − min) determines chroma.
- Calculate Lightness (L). Lightness is the average of the max and min values:
L = (max + min) / 2. This is why HSL treats black, white, and gray as points on the same lightness scale, independent of hue. - Calculate Saturation (S) and Hue (H). Saturation depends on how far the max and min values are apart relative to lightness. Hue is derived from which channel (R, G, or B) holds the maximum value, mapped onto a 0–360° color wheel.
Worked example: RGB(255, 99, 71) — a tomato red — converts to HSL(9°, 100%, 64%). Here, red is the dominant channel (max = 1, from 255/255), which places the hue near 0–10° on the wheel (the red zone), and the wide gap between the max and min channel values pushes saturation to 100%.
This is the exact calculation the converter above runs live as you adjust the sliders or paste in a value.
RGB vs HSL — What’s the Difference
RGB and HSL describe the same colors using two different models: RGB is channel-based, HSL is perception-based.
- RGB (Red, Green, Blue) defines color by mixing light intensities on three channels, each 0–255. It maps directly to how screens render pixels, which is why RGB is the native format for hex codes, CSS
rgb(), and image files. - HSL (Hue, Saturation, Lightness) defines color the way people actually describe it — by naming a hue (like “blue” or “orange”), then adjusting how vivid it is (saturation) and how light or dark it is (lightness).
Why developers switch to HSL for design work: adjusting a color’s lightness or saturation in RGB means recalculating all three channels by hand. In HSL, you change one number. This makes HSL the more practical format for building color scales, hover/active states, and theme variants in CSS — while RGB and hex remain the formats most design tools and asset files store colors in.
Neither format is “better” — they’re two representations of the same underlying color, which is exactly what this converter bridges.
FAQ
How do I convert RGB to HSL?
Enter your red, green, and blue values (0–255) into the RGB panel above, or paste a value like rgb(255, 99, 71) directly into the paste field. The tool calculates the matching HSL value instantly, along with hex, CMYK, and HSV.
What is the RGB to HSL formula?
Normalize each RGB channel to a 0–1 range, then lightness is the average of the highest and lowest channel values, saturation is based on the spread between them relative to lightness, and hue is derived from which channel is dominant, mapped to a position on the 0–360° color wheel.
What’s the difference between RGB and HSL?
RGB defines color as a mix of red, green, and blue light intensities, matching how screens render pixels. HSL defines the same color by hue (the base color), saturation (intensity), and lightness (how light or dark), which is closer to how people describe color and easier to adjust for shades and tints.
Can I convert HSL back to RGB with this tool?
Yes — the HSL panel is fully bidirectional. Enter or paste an HSL value like hsl(266, 85%, 60%) and the RGB, hex, CMYK, and HSV fields update automatically.
Why does HSL use percentages while RGB uses 0–255?
Saturation and lightness are proportions — how saturated or how light a color is relative to its maximum — so they’re naturally expressed as percentages (0–100%). RGB channels represent raw light intensity levels, which historically map to an 8-bit range (0–255) per channel.