HesapHanem

CSS HSL to Hex Converter

Enter HSL hue, saturation and lightness to get the hex color code.

How it is calculated

Hue H (0–360 degrees), saturation S and lightness L (both 0–100 percent) are converted to sRGB. Chroma is C = (1 − |2L − 1|) × S, the hue is placed on a six-sector colour wheel (H / 60), and a second component X = C × (1 − |(H/60 mod 2) − 1|) fills the middle channel. An offset m = L − C/2 is then added to every channel, each is multiplied by 255 and rounded to a whole number between 0 and 255, and the three values are written as two-digit hexadecimal pairs in uppercase. Values outside the ranges (hue above 360, percentages above 100 or below 0) return no result rather than being clamped.

Worked example

Take H = 210, S = 65 %, L = 45 %. Chroma is (1 − |0.9 − 1|) × 0.65 = 0.585. The hue sits in the 180–240 sector, so red gets 0, green gets X = 0.2925 and blue gets C = 0.585. The offset is m = 0.45 − 0.2925 = 0.1575. Multiplying by 255 and rounding gives red 40, green 115 and blue 189, which is rgb(40, 115, 189). In hexadecimal that is 28, 73 and BD, so the result is #2873BD.

Try this example →

Common mistakes

  • Typing saturation or lightness as a fraction such as 0.65 instead of 65. The tool expects percentages, so 0.65 is read as 0.65 percent and gives an almost grey colour.
  • Entering a hue as a negative angle or above 360. CSS wraps the hue around, but this tool returns no result for those values, so reduce the angle to 0–360 first.
  • Expecting lightness 50 to be a neutral mid-tone. In HSL, 50 percent lightness is where the colour is at full vividness, while 0 is always black and 100 is always white whatever the hue and saturation.
  • Pasting the lowercase or three-digit short hex into code that compares strings. The tool always outputs six uppercase digits, so normalise case before comparing.
  • Assuming two colours with the same lightness look equally bright. HSL lightness is not perceptual, so a yellow and a blue at the same L differ greatly in apparent brightness.

About this calculator

HSL (hue, saturation, lightness) and hex are two different ways of writing the same sRGB color in CSS — HSL describes a color the way a person intuitively thinks about it (which color, how vivid, how light or dark), while hex encodes the raw red, green, and blue channel values as a six-digit base-16 number. Converting between them requires first turning the HSL values into RGB using the standard HSL-to-RGB conversion formulas, then formatting each channel as a two-digit hexadecimal pair.

This calculator does that conversion automatically, taking hue (0 to 360 degrees), saturation, and lightness percentages and returning the equivalent uppercase hex code. It's an everyday utility for front-end developers and designers who pick colors intuitively on an HSL slider — because adjusting lightness or saturation independently is far more predictable than editing hex digits — but need the hex form for a design tool, a CSS variable, or a codebase that standardizes on hex.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    For a shade scale, hold hue and saturation fixed and step only lightness. With hue 210 and saturation 100, lightness 40 gives #0066CC, 50 gives #0080FF and 60 gives #3399FF, which keeps a family of blues consistent. Lightness is not perceptual, so check contrast separately. Which output formats, such as shorthand hex or 8-digit hex with alpha, would help you?

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