Hex to HSL Color Converter
Convert a CSS hex color code to HSL (hue, saturation, lightness) in one click.
How to use this tool
- Enter a 6-digit hex color code (e.g. #ff5733). A leading # is optional.
- The tool converts it to HSL: hue in degrees, saturation and lightness as percentages.
- Copy the hsl() string into your CSS or stylesheet.
Paste a hex color code and get the equivalent HSL value for use in CSS hsl() functions or design tools.
Formula
Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.
Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.
How it works
Hex color codes are simply a compact hexadecimal notation for RGB triplets: the first two hex digits encode Red, the next two Green, the last two Blue, each on a 0–255 scale. Converting to HSL means first decoding those byte values to 0–1 floats, then running the standard RGB-to-HSL algorithm to extract hue, saturation, and lightness.
A common mistake is forgetting to expand 3-digit shorthand hex codes (e.g. #fff) to 6 digits before parsing — treating #fff as #ff + f produces incorrect channel readings. Always double each digit: #fff → #ffffff.
Worked example
Convert #ffffff (white) to HSL
- Parse hex: R = 0xFF/255 = 1.0, G = 0xFF/255 = 1.0, B = 0xFF/255 = 1.0.
- max = 1.0, min = 1.0, so L = (1+1)/2 = 1.0 → 100%.
- max equals min, so S = 0% and H = 0° (achromatic).
hsl(0, 0%, 100%)
Common mistakes to avoid
- Pasting a hex value that includes spaces or hidden characters -- always copy directly from a color picker to avoid parsing failures.
- Assuming the hex code is case-sensitive -- #FF0000 and #ff0000 are identical; capitalization does not matter.
- Expecting to copy HSL output directly into CSS without the hsl() wrapper -- the numbers need to be written as hsl(H, S%, L%) in stylesheets.
Key terms
- Hex color code
- A 6-digit (or 3-digit shorthand) base-16 string representing an RGB color, e.g. #3a86ff, where each pair of digits encodes one 0–255 channel.
- Shorthand hex
- A 3-digit hex notation (#rgb) where each digit is doubled to get the full 6-digit value; #abc is equivalent to #aabbcc.
- Lightness (HSL)
- The average of the maximum and minimum normalized channel values, representing perceived brightness from 0% (black) to 100% (white).
- Achromatic
- Describes a color with equal R, G, and B values (any gray, including white and black), resulting in zero saturation and an undefined (conventionally 0°) hue.
Frequently asked questions
- Why convert hex to HSL?
- HSL is easier to reason about when adjusting brightness or saturation. You can keep the hue fixed and tweak saturation/lightness to create tints and shades.
- Does this support 3-digit hex?
- Yes — #abc is treated as #aabbcc.