HEX to HSL Converter

The default colour #4f46e5 converts to rgb(79, 70, 229) and hsl(243, 75%, 59%). The HEX box accepts:

• six digits, with or without the #;
• three-digit shorthand, where each digit is doubled, so #f0f means #ff00ff and gives hsl(300, 100%, 50%);
• upper or lower case, which give the same result.

Codes with an alpha channel, the four- and eight-digit forms like #4f46e5cc, are not accepted. You'll see a note asking for a 3- or 6-digit code, and the RGB and HSL boxes keep showing the default colour's values rather than yours, so don't copy them until the note disappears.

The HSL values are rounded to whole numbers. Converting hsl(243, 75%, 59%) back gives rgb(80, 72, 229), a step away from the original rgb(79, 70, 229), which is #5048e5 instead of #4f46e5. You won't see the difference, but a design token or a test that compares exact codes will.

Rounding also merges near neighbours. #7f7f7f and #808080 both come out as hsl(0, 0%, 50%). Keep the HEX code as the source of truth and treat the HSL figure as a handle for adjusting the colour.

HSL is handy for theming because the hue and saturation stay put while you move the lightness. Taking 59% up or down by 10 points gives hover and border shades that clearly belong to the same colour:

The middle row is your original code. Paste the other two into the HEX box and they come back with the same hue and saturation, so the set stays consistent.

• Greys, black and white have a saturation of 0%, and their hue is shown as 0. The hue has no meaning for them, so any value would give the same colour.
• Reds just short of a full turn can round up to 360: #ff0001 gives hsl(360, 100%, 50%). CSS treats 360 the same as 0.
• The copied value uses the comma syntax, hsl(243, 75%, 59%), which every current browser reads.