Hex to HSL Converter

Free, instant, copy-ready — no signup.

Paste a hex color code to get its hue, saturation, and lightness as a ready-to-use CSS hsl() value. The conversion happens instantly as you type, and one click copies the whole string. Going the other way? Use the HSL to hex converter.

Reading an HSL Value

hsl(153, 40%, 30%) reads as: a hue of 153° on the color wheel (0° is red, 120° green, 240° blue — 153° is green leaning toward teal), saturation of 40% (moderately muted; 0% would be gray, 100% fully vivid), and lightness of 30% (fairly dark; 0% is black, 50% the pure color, 100% white). Together that's the dark forest green you see in the swatch above.

Why Convert Hex to HSL?

Hex codes are opaque — you can't tell from #2d6a4f how to make it lighter or more muted. In HSL those moves become single-number edits: raise lightness a few points for a hover state (the lighten color tool does this for you), lower it for an active state, or hold hue steady and step lightness to build a whole ramp with the tint and shade generator.

Modern CSS can even do the tweak inline with relative color syntax — no conversion tool needed once you understand what the channels mean:

/* Same color, restated through its own channels */
background: hsl(from #2d6a4f h s l);

/* A hover state 15 lightness points lighter */
background: hsl(from #2d6a4f h s calc(l + 15));   /* ≈ #45a177 */

Example Hex → HSL Values

Need the raw channel numbers instead? The hex to RGB converter gives you rgb() values, and RGB to hex goes back the other way. Or explore hue, saturation, and lightness interactively with the color picker.

Frequently Asked Questions

• How do you convert hex to HSL?

  Convert the three hex pairs to RGB values (0–255) and scale them to 0–1. Lightness is the average of the highest and lowest channels, saturation comes from how far apart they are, and hue depends on which channel dominates. For example, #2D6A4F is rgb(45, 106, 79), which works out to hsl(153, 40%, 30%).

• What is the HSL of #2d6a4f?

  #2D6A4F is hsl(153, 40%, 30%) — a hue of 153° (green leaning toward teal), 40% saturation, and 30% lightness. The unrounded values are approximately 153.4°, 40.4%, and 29.6%.

• Which is better for CSS, hex or HSL?

  Both are valid CSS and render identically, so neither is objectively better. Hex is compact and the default in design tools and tokens; HSL is easier to reason about and tweak — a hover state is one lightness change. Many teams design in HSL and store the final values as hex.

• How do I make a hex color lighter using HSL?

  Convert the hex to HSL, raise the lightness, and convert back: #2D6A4F is hsl(153, 40%, 30%), and raising lightness to 45% gives #45A177, a clearly lighter green. Modern CSS can skip the round trip with hsl(from #2d6a4f h s calc(l + 15)), or the lighten color tool can output the exact hex for you.

• Are HSL and HSB/HSV the same?

  No. They share the same hue, but HSL's lightness puts the pure color at 50% and white at 100%, while HSB/HSV's brightness puts the pure color at 100%. Saturation is computed differently too: #2D6A4F is hsl(153, 40%, 30%) but roughly hsb(153, 58%, 42%). Design-tool color pickers usually show HSB.

Related tools: HSL to hex · hex to RGB · RGB to hex · color picker · tint & shade generator