HEX to HSL Converter
HEX to HSL Converter derives hue, saturation, and lightness from an opaque HEX color. HSL can be more convenient for rotating hue or adjusting nominal lightness, but it is a cylindrical transformation of sRGB—not a perceptually uniform color space. Equal HSL lightness values do not guarantee equal perceived brightness or accessible contrast.
Runs locally — files stay on your deviceWhat does HSL represent?
H is hue angle, S is saturation percentage, and L is lightness percentage. It is another notation for an sRGB color.
HSL reorganizes RGB coordinates
Hue is an angle around a color wheel, saturation describes distance from the gray axis, and lightness ranges from black through the color toward white. Hue is conventionally irrelevant when saturation is zero.
How it works
Enter a HEX color and copy the derived hsl() values. Use the conversion as a coordinate translation, then verify the actual rendered color and contrast in context.
Key concepts
Hue is circular
Zero and 360 degrees indicate the same red direction.
HSL is not perceptually uniform
Different hues at the same lightness can appear very different in brightness.
When to use it
- Create an HSL design token from a HEX value.
- Inspect nominal hue, saturation, and lightness.
- Prepare hue rotations or related HSL adjustments.
When not to use it
- Do not use HSL lightness as a WCAG contrast measure.
- Do not assume HSL steps look perceptually even.
- Do not expect gamut or color-profile conversion.
Worked examples
Pure red
- Input
#FF0000- Expected output
hsl(0, 100%, 50%)
Red is the zero-degree hue at full saturation.
Mid gray
- Input
#808080- Expected output
Approximately hsl(0, 0%, 50%)
Hue has no visual effect when saturation is zero.
White
- Input
#FFFFFF- Expected output
hsl(0, 0%, 100%)
Maximum HSL lightness is white.
Common mistakes
Reading lightness as luminance
They are different calculations. Correction: Use relative luminance for contrast.
Treating gray hue as meaningful
At zero saturation, changing hue does not change the rendered gray. Correction: Focus on lightness for achromatic colors.
Expecting uniform palette steps
HSL spacing is not perceptually even. Correction: Review visually or use a perceptual color space.
Best practices
- Normalize hue consistently.
- Keep percentages with saturation and lightness.
- Validate contrast separately.
Related operations and differences
HEX to RGB Converter
Choose HEX to RGB Converter when you need to convert a HEX color to RGB.; use HEX to HSL Converter specifically for hex hsl.
Analogous Color Generator
Choose Analogous Color Generator when you need to generate neighboring harmonious colors.; use HEX to HSL Converter specifically for hex hsl.
Color Shade Generator
Choose Color Shade Generator when you need to create darker shades of a base color.; use HEX to HSL Converter specifically for hex hsl.
Color Tint Generator
Choose Color Tint Generator when you need to create lighter tints of a base color.; use HEX to HSL Converter specifically for hex hsl.
Complementary Color Generator
Choose Complementary Color Generator when you need to find the color opposite on the hue wheel.; use HEX to HSL Converter specifically for hex hsl.
CSS Gradient Generator
Choose CSS Gradient Generator when you need to create a two-color linear CSS gradient.; use HEX to HSL Converter specifically for hex hsl.
Limitations and privacy
- HSL is derived from sRGB and is not perceptually uniform.
- Rounding can change a round-trip value slightly.
- Alpha and color profiles are not included.
Color values are calculated locally in this browser.
Frequently asked questions
Is HSL more accurate than HEX?
No. It is a different coordinate notation.
Why can gray have hue zero?
Hue is irrelevant when saturation is zero, so a conventional value is used.
Is HSL lightness the same as brightness?
Not perceptually and not for WCAG contrast.
Can I convert back exactly?
Usually closely, but display rounding can introduce small differences.