Calculateus

RGB to HSL Converter

Convert an RGB color value into HSL (hue, saturation, lightness).

Result

HSL
hsl(217, 90%, 61%)

Hue is an angle on the color wheel (0-360°); saturation and lightness are percentages. HSL is often more intuitive for adjusting a color's shade or vibrance than editing RGB channels directly.

About the RGB to HSL

RGB describes a color by how much red, green, and blue light combine to produce it, but adjusting a color's brightness or vividness in RGB means recalculating all three channels at once. This calculator converts an RGB value into HSL (hue, saturation, lightness), where those three properties are separated into independent numbers that are easier to reason about and adjust.

How It Works

Enter red, green, and blue values from 0 to 255 (values outside that range are pulled back into it automatically). The calculator normalizes each channel to a 0-1 scale, finds the highest and lowest of the three, and uses those two numbers to compute lightness, saturation, and hue in turn.

With r, g, b normalized to 0-1: lightness = (max + min) / 2. If max equals min, hue = 0 and saturation = 0. Otherwise, delta = max - min, and saturation = delta / (2 - max - min) when lightness is above 0.5, or delta / (max + min) when lightness is 0.5 or below. Hue depends on which channel is largest: if red is max, hue = ((g - b) / delta + (6 if g < b else 0)) x 60; if green is max, hue = ((b - r) / delta + 2) x 60; if blue is max, hue = ((r - g) / delta + 4) x 60.

Formula & Methodology

For the default RGB(66, 135, 245): normalized values are about r=0.259, g=0.529, b=0.961. Max is b and min is r, so lightness = (0.961 + 0.259) / 2 = 0.610, or 61%. Delta = 0.702, and since lightness exceeds 0.5, saturation = 0.702 / (2 - 0.961 - 0.259) = 0.702 / 0.780 = 0.900, or 90%. Since blue is the max channel, hue = ((0.259 - 0.529) / 0.702 + 4) x 60 = 3.615 x 60, about 217 degrees, giving hsl(217, 90%, 61%).

Examples

Converting a medium blue

The default RGB(66, 135, 245) converts to hsl(217, 90%, 61%), reflecting a vivid, moderately light blue where blue is the dominant channel.

Converting a muted red

RGB(200, 50, 50) converts to hsl(0, 60%, 49%): lightness sits at or below 0.5 so the low-lightness saturation formula applies, and with green and blue tied at the minimum, hue resolves to exactly 0 degrees.

Advantages

  • Handles the branching lightness, saturation, and hue math automatically instead of requiring a manual, error-prone calculation.
  • Produces a ready-to-use hsl() string that can be pasted directly into CSS.
  • Lets a color's shade or vibrancy be adjusted by changing one HSL value instead of recalculating all three RGB channels together.

Common Mistakes

  • Averaging all three RGB channels and calling that lightness, when true HSL lightness only uses the average of the maximum and minimum channels.
  • Expecting a meaningful hue value for a gray or near-gray color, when hue is mathematically undefined, and set to 0, once max equals min.
  • Applying the same saturation formula regardless of lightness, when the calculation actually switches between two different expressions above and below 50% lightness.

Edge Cases to Watch For

  • Input values are clamped to the 0-255 range before any math runs, so a value entered below 0 or above 255 is pulled back to that boundary rather than distorting the result.
  • When red, green, and blue are all equal (a neutral gray), max equals min, so hue and saturation both come out as 0, and lightness alone describes the color.
  • The hue calculation branches to a different formula depending on which channel is largest, including a +6 adjustment in the red-is-max branch when green is smaller than blue, which keeps the resulting hue angle within the standard 0-360 degree range instead of going negative.

Common Use Cases

  • Web and UI designers converting a brand or sampled RGB color into HSL for easier theming and shade adjustments.
  • Front-end developers generating CSS color variables or gradients that need independent control of hue and lightness.
  • Digital artists and hobbyists translating a picked pixel color into an editable hue and lightness scale.
Written & fact-checked by the Calculateus TeamLast updated August 5, 2026How we verify our formulas

Frequently asked questions

Why would I use HSL instead of RGB when picking a color?

HSL separates a color's hue (which color), saturation (how vivid), and lightness (how light or dark) into independent values, so you can darken or desaturate a color by adjusting just one number - doing the same adjustment in RGB requires recalculating all three channels together.

Related calculators

Length ConverterConvert between millimeters, centimeters, meters, kilometers, inches, feet, yards and miles.Weight ConverterConvert between milligrams, grams, kilograms, ounces, pounds and stone.Temperature ConverterConvert temperatures between Celsius, Fahrenheit and Kelvin.Volume ConverterConvert between milliliters, liters, teaspoons, tablespoons, cups, pints, quarts and gallons.

Conclusion

Because HSL separates a color into hue, saturation, and lightness, it is often the more intuitive scale for design work, even though the underlying math to get there from RGB has several conditional branches. This calculator runs through that math in one step.

References