HSL to HEX Converter — Convert HSL Values to Hex

Convert HSL values into hexadecimal color codes. Fine-tune hue, saturation, and lightness controls to generate clean 6-digit hex values for web and UI design.

How does HSL to HEX conversion work?

Converting HSL to HEX is a two-step process: first, H, S, L values are converted to RGB decimal channels using a standard color-wheel formula. Then each RGB channel is converted from decimal to two-digit hexadecimal and concatenated with a # prefix.

For hsl(221, 83%, 53%), the formula produces rgb(37, 99, 235), which then converts to #2563EB.

When would you convert HSL to HEX?

Many design tools and CSS properties output HSL because it is intuitive to adjust. However, older codebases, SVG files, and some email clients require HEX format. This converter lets you work in HSL and get a compatible HEX output instantly.

RGB to HEX Examples

Here are some common RGB colors and their corresponding HEX values.

Colour name	RGB value	Hex code
Black	`rgb(0, 0, 0)`	`#000000`
White	`rgb(255, 255, 255)`	`#FFFFFF`
Red	`rgb(255, 0, 0)`	`#FF0000`
Green	`rgb(0, 128, 0)`	`#008000`
Navy	`rgb(0, 0, 128)`	`#000080`
Yellow	`rgb(255, 255, 0)`	`#FFFF00`
Purple	`rgb(128, 0, 128)`	`#800080`
Blue	`rgb(37, 99, 235)`	`#2563EB`

Related Color Tools

RGB to HEX RGB to HSL HEX to HSL HEX to RGB RGB to CMYK HEX to CMYK

More Color Tools

Gold Colors Yellow Colors Orange Colors Blue Colors Green Colors Purple Colors Pink Colors Brown Colors

Looking for more color tools? Browse all Color Tools for color codes, converters, shade references, and other color resources.

Frequently asked questions

Does HSL support transparency?

Standard HSL has no alpha channel. For transparency use hsla(H, S%, L%, A) where A is 0–1. The HEX equivalent is an 8-digit code where the last two digits encode the alpha.

What happens at L = 0% or L = 100%?

At L = 0%, the result is always black regardless of hue. At L = 100%, always white. The hue is only visible between those extremes.