Your stylesheet uses hsl(210, 50%, 40%), while a page builder asks for a HEX color. Copying the three HSL numbers into an RGB field will produce a different color: the components mean different things. For this opaque example, the matching values are rgb(51, 102, 153) and #336699.
Use this workflow to convert a fixed HSL value, check the result and keep the original available for later edits. The worked example lands on exact integer RGB channels; other HSL values may require rounding in this converter.
Read the HSL value before converting it
HSL describes an sRGB color using hue, saturation and lightness. In our example:
- 210: the hue angle in degrees.
- 50%: the saturation. Zero saturation gives a gray, while 100% is fully saturated for that hue and lightness.
- 40%: the lightness. Its endpoints are black at 0% and white at 100%.
Keep the percentage signs in the comma-separated form shown here. A modern equivalent is hsl(210 50% 40%). Both describe the same opaque color. MDN’s HSL reference explains these components and the two syntax styles.
Start with a complete, fixed value. A fragment such as 210 50% 40% taken from a custom property needs the surrounding hsl() function for this procedure. Resolve variables in the actual stylesheet before converting a value that depends on them.
Convert the example in the Color Converter
- Open the Color Converter and replace the text in its color input with
hsl(210, 50%, 40%). - Wait for the rows to update as you type. There is no separate Convert button.
- Check that the RGB row shows
rgb(51, 102, 153)and the HEX row shows#336699. - Use Copy beside the format your destination accepts, then paste that complete value into the destination field.
- Enter
#336699back into the converter. For this example, the HSL row should returnhsl(210, 50%, 40%).
Keep the input and output together in your handoff notes. Avoid clicking a tint or shade while transferring the original color; those swatches load a changed color. If a warning appears, fix the input before copying, because the last valid results can remain visible.
Why the RGB numbers are different
RGB describes red, green and blue channels rather than a hue angle and two percentages. MDN’s RGB reference documents the numeric channel range of 0 to 255. Thus rgb(210, 50, 40) is not a translation of our HSL value.
You can check the example with intermediate normalized values. With saturation 0.5 and lightness 0.4, the HSL calculation gives a chroma of 0.4 and an offset of 0.2. The 210-degree hue produces normalized red, green and blue values of 0.2, 0.4 and 0.6. Multiplying each by 255 gives 51, 102 and 153.
The corresponding HEX pairs are 33, 66 and 99. Our RGB-to-HEX guide explains that final notation step in more detail.
Keep precision and transparency in view
This tool rounds RGB channels to integers and its displayed HSL components to whole numbers. For decimal HSL inputs, the converted result may approximate the original. Preserve the source value if exact precision matters, and avoid repeatedly converting rounded results through several formats.
Check whether the source has alpha
This example has no transparency. If your source includes an alpha component, do not discard it by copying the plain RGB row. Use an alpha-capable destination and verify the transparency separately. A six-digit HEX field cannot carry alpha.
Apply the value without redesigning the color
For this example, either declaration can set the same solid background:
.notice-hsl { background-color: hsl(210 50% 40%); }
.notice-hex { background-color: #336699; }After saving, inspect the actual component for overriding styles and opacity. HSL lightness is not a contrast score or a guarantee of equal perceived brightness across hues; the CSS Color specification’s HSL section describes this limitation. Converting the notation does not improve text readability. Check the final text and background pair separately using our button text contrast workflow.