HEX to HSL converter
Enter a HEX code, with or without the #, and get HSL values, which make lighter and darker shades easy to build in CSS.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter hex code.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Each pair of HEX digits is read as a base-16 number: R = RR, G = GG, B = BB, from 0 to 255; a 3-digit code doubles each digit. Then (RGB kept unrounded): With max and min of R/255, G/255, B/255 and d = max - min: L = (max + min) / 2, S = d / (1 - |2L - 1|), and H = 60 × ((G - B) / d mod 6) when R is largest, 60 × ((B - R) / d + 2) when G is largest, 60 × ((R - G) / d + 4) when B is largest.
Example
Inputs: HEX code = #1E90FF. Result: HSL code: hsl(209.6, 100%, 55.9%); Hue (H): 209.6 °; Saturation (S): 100 %.
#1E90FF
hsl(209.6, 100%, 55.9%)
Limits and caveats
- Transparency (#RRGGBBAA or #RGBA) is not read; enter the 6 or 3 digit color part.
- Values in the code are rounded to one decimal, so converting back can shift an RGB channel by 1.
- All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.
Questions about this tool
Why is the hue a decimal like 209.6?
A HEX code fixes each channel in whole steps, so the hue often lands between two degrees. The code shows it rounded to one decimal.
Does it accept 3-digit codes like #0AF?
Yes. A 3-digit code is expanded by doubling each digit, so #0AF becomes #00AAFF. The # is optional.
Can I paste the HSL result straight into CSS?
Yes. The hsl() function works in every current browser, and the CSS line in the results is ready to copy as it is.