How to Convert HEX, RGB, and HSL Colors

What the color converter does

Color Converter is useful when a design value is available in one color notation but your next task calls for another. It accepts color text in HEX, RGB, or HSL form and can return the three representations together with their numeric components and a preview. This makes it practical for checking a color across a design mockup, stylesheet, or documentation workflow.

How to convert a color

Enter a color value in the color field. A blank field does not produce a conversion result, so provide color text before submitting it.
Choose the source format when the control is available. The recognized values are lowercase hex, rgb, and hsl. If no source format is supplied, the converter treats the input as HEX. Use the intended lowercase value because other source-format values are not recognized.
For HEX, enter a three-digit or six-digit value, with or without #, such as #369 or 336699. For RGB, provide three numeric channel values, with each resulting channel from 0 through 255. For HSL, provide three numeric values for hue, saturation, and lightness.
Submit the color for conversion. If the text is empty, malformed, outside the accepted range, or paired with an unrecognized source format, the conversion can fail. RGB and HSL text is read from numeric substrings, so text that looks malformed may still be interpreted rather than rejected as a fully checked color expression.
Review the returned HEX, RGB, and HSL representations, then use the preview to compare the converted color with the intended design value.

How to read the result

A successful result includes three color representations, numeric RGB channel values, numeric HSL components, and a preview. RGB channel values are represented as integers, and converted HSL components are rounded to integers.

HSL handling has an important boundary: hue is wrapped within a 360-degree cycle, while saturation and lightness values above 100 percent are clamped to 100 percent. HSL parsing extracts unsigned numeric substrings, so a leading minus sign is not treated as a negative component; the digits after the sign may be used instead. Treat the returned values as the converter's interpretation of the supplied text, especially when the input contains unusual formatting.

A failed result means the input was not converted under the selected source format. Check the spelling and lowercase form of the source format, confirm that the color field is not empty, and verify the component values before trying again.

Worked example

A designer has a three-digit HEX value from a mockup and wants to inspect its equivalent color representations before documenting it.

Enter #369 as the color, select the HEX source format, and submit it for conversion.

The result contains hexadecimal, RGB, and HSL representations, numeric RGB and HSL component values, and a preview.

Limitations

Source-format handling recognizes lowercase hex, rgb, and hsl; an unrecognized source format does not produce a conversion.
RGB and HSL text is interpreted from numeric substrings, and HSL signs and out-of-range values can affect interpretation rather than receiving full syntax validation.

Common errors

If the source format is entered with unexpected capitalization or a value outside hex, rgb, and hsl, conversion fails. Select or enter the supported lowercase format, or leave the format unset when the color is HEX.

FAQ

What happens if I leave the color input empty?

A blank color field does not produce a conversion result. Enter a supported HEX, RGB, or HSL value before submitting it.

How do I enter a HEX color?

Use a three-digit or six-digit hexadecimal value, with or without a leading #, and select hex when a source format is required. HEX is also the default when no source format is supplied.

Can I convert RGB or HSL values?

Use three numeric RGB channels from 0 through 255, or three numeric HSL components. HSL hue is wrapped within 360 degrees, while saturation and lightness values above 100 percent are clamped to 100 percent.