ONELESS / COLOR
HSL gives a compact HEX color a more descriptive set of coordinates: a hue angle, a saturation percentage and a lightness percentage. Hex to HSL helps you read those values before preparing a CSS color. It changes the notation while keeping the underlying sRGB color.
Open Hex to HSL. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
HSL lightness is calculated from the largest and smallest RGB channels. It is useful for describing and editing CSS colors, but equal HSL lightness across different hues does not guarantee equal visual brightness or text contrast.
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
#336699 converts to hsl(210, 50%, 40%). 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
Convert a HEX token when a stylesheet uses HSL components or hue adjustments. Use the result as the starting value and check any modified colors in their actual interface context.
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
At zero saturation, hue does not change the resulting gray. This tool reports 0 degrees as a conventional value for an undefined achromatic hue.
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 hsl(0 100% 50%). Hue chooses the red position, saturation is full, and HSL lightness is halfway between black and white.
No. HSL lightness is a coordinate in the color model. Two hues with the same lightness can have different luminance and text contrast.
Usually the byte color can be recovered when enough precision is retained. Rounding hue, saturation or lightness before converting back can change a channel slightly.
REFERENCES
ANOTHER SMALL STEP
See the hue, saturation and lightness inside your HEX.
Return to Hex to HSL ↑
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose Pink