About HEX to HSL conversion
Hex codes are compact but opaque: it is hard to look at #1c6b40 and know how to make it 10 percent lighter. HSL describes the same color as a hue angle on the color wheel (0–360°), a saturation percentage, and a lightness percentage. That makes it the friendlier format for building design systems, theming with CSS custom properties, and creating consistent variations of a brand color.
Enter a three- or six-digit hex code and the converter shows the hsl() value immediately, alongside RGB and a live swatch. Hue, saturation, and lightness are rounded to whole numbers, which is how most people write them in CSS. Because of that rounding, converting the HSL back can land one step away from the original hex. For pixel-exact brand work, keep the hex as your source of truth.
Once you see a color in HSL, small adjustments become predictable: nudge lightness for hover and pressed states, drop saturation for disabled controls, or rotate hue for complementary accents. The built-in tints and shades give you a ready-made ramp to start from.
How to do it
- Click the button above to open the Color tool.
- Enter your hex value in the HEX field, or choose a color with the picker.
- Read the HSL row, such as hsl(147, 59%, 26%).
- Copy the HSL value into your stylesheet or design tokens.
- Use the tint and shade swatches to explore lighter and darker steps.
