Hex to HSL Converter

HSL is hue, saturation, and lightness. Hue is an angle from 0 to 360 degrees on the color wheel (0 red, 120 green, 240 blue). Saturation is the color's intensity from 0 (gray) to 100 (pure color). Lightness is how light or dark it is from 0 (black) to 100 (white), with 50 being the pure hue. CSS writes it as hsl(11, 100%, 60%).

First parse the hex into integer R, G, B (0-255) and divide each by 255. Let max = max(R', G', B') and min = min(R', G', B'). Lightness L = (max + min) / 2. If max equals min the color is gray, so H = 0 and S = 0. Otherwise S = (max - min) / (2 - max - min) when L > 0.5, else (max - min) / (max + min). Hue depends on which channel is the max: red gives (G' - B') / d wrapped into 0-6, green gives (B' - R') / d + 2, blue gives (R' - G') / d + 4. Multiply by 60 to get degrees.

HSL and RGB live on different grids. RGB is a 256-step cube, HSL stores hue as a continuous angle then rounds to integers. Going hex (24-bit) to HSL (rounded integers) and back can shift a channel by one unit, which is invisible to the eye but visible in the numbers. The converter rounds both outputs to whole numbers, so expect at most a one-step drift on a roundtrip.

Keep H and S the same and change L. To make a tint, raise lightness toward 100 (#ff5733 at L 60 becomes a pastel at L 85). To make a shade, drop lightness toward 0. This is why designers prefer HSL for theme palettes: every step in a color scale is a lightness change at fixed hue and saturation, which keeps the family consistent.

The CSS spec defines hue as 0-360 degrees (it wraps, so 361 is just 1) and saturation and lightness as 0-100 percent. Values outside that range, negative numbers, NaN, or blank fields are rejected and the converter shows an error instead of guessing. For hex input, only 3-digit or 6-digit hex with characters 0-9 and a-f is accepted (with or without a leading #).