HEX, RGB and HSL Conversion: Formats, Alpha and Rounding

To move color codes between CSS, design files and programs, check the original values, alpha and destination format. Enter #3ac in the color converter and verify that #33aacc and rgb(51, 170, 204) describe the same opaque color.

Choose HEX, RGB or HSL for the task

## Convert hexadecimal components to decimal In #RRGGBB, RR is red, GG green and BB blue. Expanding #3ac to #33aacc preserves the value. Four-digit #3aac expands to #33aaaacc in CSS and includes alpha.

HSL lightness and WCAG luminance have different roles

HSL represents hue, saturation and lightness. The tool accepts a nonnegative safe integer hue and wraps it modulo 360. Saturation and lightness are integers from 0 to 100. For hsl(210,100%,50%), rounding RGB to 8-bit components gives #0080ff.

The HSL L value is not the relative luminance used by WCAG. Yellow at hsl(60,100%,50%) and blue at hsl(240,100%,50%) have the same L but different contrast on white. Check a foreground/background pair with the contrast guide and checker.

Check supported input syntax before copying

Other fields can retain the previous values during an error, but copying is disabled. Correct the syntax or choose a color with the picker. HSL output is rounded, so a round trip may change the RGB channels. For example, #33aacc → hsl(193,60%,50%) → #33abcc. Copy HEX or RGB when preserving the original channels matters.

Composite transparent colors with the background

For a simple source-over composite on an opaque background, each resulting component is alpha × foreground + (1 − alpha) × background. Using ordinary sRGB-component compositing, 50% red over white rounds to rgb(255,128,128), approximately #ff8080. The alpha in #ff000080 is 128/255, slightly different from 0.5.

For a background image, gradient or blend mode, inspect the actual compositing conditions and location. To generate more candidates, use the palette guide and palette generator.

You can reopen the tool from the utility category. A favorite adds a shortcut to My Tools in the same browser. Keep the actual color values in your design file.

Tools Hub editorial staff checked CSS references, input handling, copying and rounding examples on November 8, 2026.

FAQ

How do I expand three-digit HEX?

Repeat each digit. #3ac becomes #33aacc. The component values are 51, 170 and 204, giving rgb(51, 170, 204).

Can I enter four- or eight-digit HEX or rgba()?

CSS supports these alpha formats, but this tool handles opaque colors. An alpha input produces an error. Check both the original color and its background.

Why does converting through HSL slightly change a color?

The HSL output rounds hue, saturation and lightness to integers. #33aacc displays as hsl(193, 60%, 50%), which converts back to #33abcc. Copy HEX or RGB to preserve the original 8-bit values.

Can I copy a result during an input error?

Copy is disabled while input is invalid. Enter RGB integers from 0 to 255 or saturation and lightness integers from 0 to 100%. Valid input enables copying again.

@misc{tools_hub_color_conversion_guide_2026,
  author = {{Tools Hub Editorial Team}},
  title = {HEX, RGB and HSL Conversion: Formats, Alpha and Rounding},
  year = {2026},
  url = {https://the-tools-hub.net/en/blog/color-conversion-guide/}
}