HSL to HEX Alpha

HSL to HEX Alpha color conversion

Use HSL to HEX Alpha when a design specification, stylesheet, or color editor needs a different representation of the same color. Start hexadecimal input with #, or use a lowercase rgb, rgba, hsl, hsla, or hsv function name. Select Submit, then check the target-format result before copying it.

How this conversion works

With saturation S and lightness L normalized to 0 through 1, chroma is (1 - |2L - 1|) × S. Hue determines the channel sector, and L minus half the chroma gives the channel offset. For CSS HEX Alpha output, encode RGB channel pairs and an alpha pair. The alpha byte is the rounded value of alpha × 255. For alpha 0.8, that byte is CC.

Worked color example

The sample hsl(210, 50%, 40%) corresponds to #336699FF for the color coordinates illustrated here. Small differences in the final digits can result from rounding. This example explains the mathematical representation; it does not establish which input syntax this tool accepts.

Understand the formats

HSL describes hue, saturation, and lightness. Lightness is halfway between the largest and smallest normalized RGB channels, rather than a direct measure of perceived brightness. CSS HEX Alpha adds an alpha pair after the red, green, and blue pairs: #RRGGBBAA. The final pair CC corresponds to an alpha value of 0.8. It is different from formats that place alpha first.

Transparency and rounding

The source example has no explicit alpha component. An opaque destination example uses alpha 1, or FF in hexadecimal. Check the actual result rather than assuming the tool chooses that default.

Frequently asked questions

Will the converted color look identical everywhere?

Equivalent coordinates describe the same color within the assumed color model. Displays, color profiles, surrounding colors, and backgrounds can affect appearance. Compare the result in the application where you will use it.

Can I interchange HSL lightness and HSV value?

No. They are different calculations. Recalculate the destination coordinates instead of moving the same percentages between HSL and HSV fields.

Related converters

Color converter tools | HEX Alpha to HSL | HSL to RGB | HSL to HEX