HEX to HSL Converter

Convert hexadecimal color codes to Hue, Saturation, Lightness values instantly in your browser.

Visual Color Picker
#14b8a6
Color Conversions

Complementary Palette

Analogous Palette

Triadic Palette

Monochromatic Palette

135°

Drag & Drop Image or Click to Browse

Supported: JPEG, PNG, GIF, SVG, WebP (max 10 MB)

Extracted Details
Hover Pixel Color:
#ffffff
Selected Color:
—

Hover over the image to preview pixel colors. Click to select and load that color into the main converter fields (HEX, RGB, HSL, CMYK).

Sample Text Display
Contrast Ratio 4.5:1
Small Text (WCAG AA - 4.5:1) Pass
Large Text (WCAG AA - 3.0:1) Pass
Small Text (WCAG AAA - 7.0:1) Pass
Large Text (WCAG AAA - 4.5:1) Pass

What is the HEX to HSL Converter?

Convert HEX color codes to HSL (Hue, Saturation, Lightness) values online. Fast, secure, browser-local hex to hsl color converter.

How to use the HEX to HSL Converter?

  1. Enter your HEX color code in the HEX input field.
  2. The tool will instantly output the matching HSL coordinates (e.g. hsl(173, 80%, 40%)).
  3. Click 'Copy' to copy the formatted HSL CSS string.

Frequently Asked Questions

What is HSL representation?

HSL stands for Hue (the color type/angle on color wheel, 0-360), Saturation (the color intensity/purity percentage, 0-100%), and Lightness (the color brightness percentage, 0-100%). It is often preferred by designers because it is much more intuitive to adjust than RGB or HEX.

How does the conversion from HEX to HSL happen?

First, the HEX code is decoded into Red, Green, and Blue percentages. Then, we find the maximum and minimum values of these channels to compute lightness. Saturation is calculated based on the difference between max and min, and hue is calculated depending on which color channel is the maximum.