HEX to HSL Converter

1. Enter a 3- or 6-digit HEX color, with or without the leading #, or choose a color with the picker.
2. Adjust hue from 0 to 360 degrees, or saturation and lightness from 0% to 100%.
3. Review the live preview and synchronized HEX, HSL, and RGB values.
4. Use the copy button beside the value you need.
5. Select Reset to return to the default color.

HEX to HSL Converter

HEX and HSL are two ways to represent the same color. HEX encodes red, green, and blue channels as hexadecimal pairs. HSL describes hue, saturation, and lightness, which can make visual color adjustments more direct. This editor converts a HEX color to HSL and RGB, and lets you edit HSL values to create a color variation.

What is HEX?

A standard six-digit HEX color uses the format #RRGGBB, with one pair of hexadecimal digits for each red, green, and blue channel. For example, #4F46E5 corresponds to RGB values 79, 70, and 229. HEX colors are common in HTML and CSS for text, backgrounds, borders, buttons, and other interface elements. The leading # is optional in this converter.

What is HSL?

HSL stands for Hue, Saturation, and Lightness. Hue identifies a position on a 360-degree color wheel. Saturation describes color intensity from 0% (neutral gray) to 100%. Lightness describes how light or dark a color is: 0% is black, 50% is the midpoint, and 100% is white.

HEX to HSL example

Enter #4F46E5 to see approximately hsl(248, 76%, 59%) and rgb(79, 70, 229). The displayed HSL channels are rounded to whole numbers, so they are a practical representation rather than every decimal place of the conversion.

Edit colors with HSL

After entering a HEX color, change hue, saturation, or lightness to explore a variation. For example, increase lightness to create a lighter background or reduce saturation for a more muted color. The preview and HEX, HSL, and RGB values stay synchronized, so the resulting HEX value is ready to copy into CSS or a design tool.

HEX, RGB, and HSL

HEX represents red, green, and blue channels in hexadecimal notation; RGB uses numeric red, green, and blue channels; HSL uses hue, saturation, and lightness. They are different representations of the same color. For example, #4F46E5 is rgb(79, 70, 229) and approximately hsl(248, 76%, 59%).

Supported HEX values and validation

The editor accepts 3- or 6-digit HEX colors, with or without #. It does not provide a separate 8-digit HEX or transparency conversion. Hue must be within 0–360 degrees, while saturation and lightness must be within 0–100%. Invalid values display an error until corrected.

When to use a HEX to HSL converter

Convert an existing CSS color to HSL, adjust a brand color for hover or active states, create lighter or more muted interface colors, build a palette, or compare color representations while debugging CSS. Edit HSL directly to change the color, then copy the updated HEX, HSL, or RGB output.

Enter a 3- or 6-digit HEX color to see synchronized HSL and RGB values with a live color preview.

Adjust HSL channels directly. The color, HEX and RGB values, and preview update automatically.

Enter a HEX value with or without #, or select a color using the built-in picker.

Copy individual HEX, HSL, or RGB outputs, or reset the editor to its default color.