ONELESS / COLOR
An HSL color can be easy to adjust, while the next field in your workflow may ask for HEX. HSL to Hex accepts individual hue, saturation and lightness values or a CSS HSL function. The preview and result follow the same conversion, with alpha included when needed.
Open HSL to Hex. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Hue is a circular angle. A full turn returns to the same position, so 570 degrees is equivalent to 210 degrees. Saturation and lightness stay between 0 and 100 percent; values outside those ranges are reported as errors.
Opacity is preserved instead of being blended into white. RGB and HSL functions include alpha below full opacity; HEX uses an extra byte. The checkerboard is only a preview aid. HEX rounds to 8-bit channels; RGB/HSL output keeps three decimal places and alpha up to four.
Malformed or out-of-range values show an error and disable copying. The tool does not silently clamp channel values or reinterpret a different input format. Use Color Converter when you want automatic format selection.
HOW TO USE IT
A WORKED EXAMPLE
hsl(210, 50%, 40%) converts to #336699. With half opacity, the result includes alpha rather than a white background. The preview is the exported 8-bit HEX appearance; small rounding differences are normal for fractional channels.
EVERYDAY USES
After choosing a hue and adjusting saturation or lightness, copy a HEX value for an app that does not accept HSL. Inspect the visible swatch and preserve alpha if it is part of the original choice.
Compare the visible color with the source before copying. This conversion describes sRGB values; it does not apply an ICC profile or guarantee an identical appearance across displays.
LOCAL WORKSPACE
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
QUESTIONS, ANSWERED
Yes. Hue accepts deg, grad, rad and turn units; a bare number means degrees. For example, .5turn is 180 degrees. Saturation and lightness are percentages.
Yes. Alpha is retained in RGBA/HSLA or an 8-digit HEX value when below 1. An 8-bit alpha byte and a decimal fraction can differ slightly through rounding.
This page is specific to its named input format. Use Color Converter for CSS named colors or a mixture of supported formats.
Check the format, number of channels, units and bounds. RGB values are 0–255 or 0–100%; HSL saturation/lightness are 0–100%; alpha is 0–1 or 0–100%. Contextual CSS expressions and wider color spaces are not supported.
It is #00FF00, the fully saturated green position in this HSL model.
At zero saturation the color is gray, so hue has no visible effect. Increase saturation to make a hue visible.
HSL lightness of 0% is black and 100% is white regardless of hue. Use an intermediate lightness to obtain a colored result.
REFERENCES
ANOTHER SMALL STEP
Give your hue, saturation and lightness a HEX code.
Return to HSL to Hex ↑
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose Pink