HesapHanem

RGB to HSL Converter

Enter red, green and blue values to convert the color to HSL.

How it is calculated

Each channel is clamped to 0–255 and divided by 255 to give r, g, b between 0 and 1. With max and min being the largest and smallest of the three, lightness is L = (max + min) / 2. If max equals min the colour is a grey, so hue and saturation are 0. Otherwise, with d = max − min, saturation is d / (max + min) when L is 0.5 or below and d / (2 − max − min) above it. Hue depends on the dominant channel: red gives (g − b) / d, green gives (b − r) / d + 2, blue gives (r − g) / d + 4, all multiplied by 60 to get degrees. Results are rounded to whole numbers, and the hex code is built from the rounded channels.

Worked example

Take R = 30, G = 144, B = 255. Normalised: 0.118, 0.565, 1.000. Max = 1.000 (blue), min = 0.118, so L = (1.000 + 0.118) / 2 = 0.559, shown as 56%. Because L is above 0.5, S = 0.882 / (2 − 1.000 − 0.118) = 1.00, shown as 100%. Blue is dominant, so H = ((0.118 − 0.565) / 0.882 + 4) × 60 = 209.6, rounded to 210°. The tool prints hsl(210, 100%, 56%), and the hex code is #1E90FF.

Try this example →

Common mistakes

  • Entering channel values as percentages or 0–1 fractions. The tool expects 0–255, so 0.5 is treated as almost black, not half intensity.
  • Typing a value above 255 and assuming it is rescaled. It is clamped to 255 (and anything below 0 to 0), so 300 and 255 give the same colour.
  • Mixing up HSL with HSV/HSB. The L here is the midpoint of max and min, so pure blue is 50% lightness, not 100% as it would be as a value in HSV.
  • Expecting a hue for greys. When R, G and B are equal, hue and saturation are both 0° and 0%, and only lightness carries information.
  • Copying the rounded figures back and expecting the exact original colour. Whole-number rounding of H, S and L can shift a channel by one or two steps.

Sources

About this calculator

To convert RGB to HSL, each channel is first normalized to a 0–1 range; lightness is L = (max + min) ÷ 2, saturation depends on how far the max and min channels are apart relative to L, and hue is derived from which channel (red, green, or blue) is largest and by how much, expressed as an angle from 0° to 360° around the color wheel.

Unlike RGB, where changing a color's brightness means adjusting all three channels together, HSL separates hue, saturation, and lightness into independent values, making it far easier to reason about — for example, lightening a color is just increasing L while keeping hue and saturation fixed. Web and UI designers use HSL (and this converter) in CSS to build consistent color palettes and hover/active-state variants from a base brand color.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    When building a button palette, keep hue and saturation from the result and move only the lightness: hsl(219, 100%, 56%) can become hsl(219, 100%, 48%) for a hover state. One caution is that equal L does not mean equal contrast. A yellow and a blue at 50 percent lightness look very different in brightness, so text legibility still needs its own check against the background. Which brand colour are you turning into a palette?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators