How to convert HEX or RGB to HSL and copy the right colour format

Choose a supported source format

The HEX / RGB / HSL Color Converter accepts opaque three- or six-digit HEX and integer rgb(r, g, b) input. It returns HEX, RGB and HSL representations. Despite the three names in its title, it does not accept HSL as an input for reverse conversion. Start from a supported value such as #ff0000 or rgb(255, 0, 0). It is a numeric colour utility, not an image eyedropper, colour-profile converter or palette extractor.

Run a simple red example

Open the tool, put #ff0000 into Input and select Apply. The result contains #ff0000, rgb(255, 0, 0), and hsl(0, 100.0%, 50.0%). The preview uses the entered colour. Short HEX #f00 gives the same result. Choose the representation required by the receiving editor rather than pasting all three lines into a field that expects one value. Editing the input clears the previous result and preview; apply again after a change.

Check the accepted syntax before diagnosing an error

Use comma-separated RGB integers from 0 to 255. This parser does not accept percentage channels, space-separated RGB syntax, colour names, rgba transparency or four/eight-digit HEX. A value can be valid CSS in another context and still fall outside this tool’s accepted input forms. Remove accidental surrounding markup, but do not assume an alpha channel can simply be discarded without changing a layered design. There is no HSI, HSV or CMYK output mode here; HSL is a different colour model.

Read HSL and its rounding correctly

HSL describes hue, saturation and lightness. For #09d4e5, the outputs are rgb(9, 212, 229) and hsl(185, 92.4%, 46.7%). The displayed hue is rounded to a whole number, while saturation and lightness use one decimal place. That compact HSL string can therefore be an approximation of the original integer RGB value. Keep the original HEX or RGB when an exact reference is needed. The lightness percentage is not a contrast ratio or a pass/fail accessibility result.

Verify the pasted colour in its final context

Use Copy or Download text for the displayed output, then select the needed line for your destination. Check the final editor’s accepted syntax and the appearance against its actual background. A colour preview alone does not check text readability; use the contrast checker for that separate comparison. These web-colour representations do not promise a matching printed ink colour or perform ICC/CMYK conversion. Processing happens locally without uploading an image or a design file. Preserve the source value alongside any rounded version you share.

Sources

• MDN: RGB colour values
• MDN: HSL colour values
• Kervoni: Supported colour parsing and conversion