Hex to RGB Color Converter

How to use the hex to rgb converter

1. Type or paste your hex code into the input field. You can include the # prefix or leave it off.
2. The tool automatically detects whether you entered a 3, 4, 6 or 8 digit hex color to rgb conversion.
3. Read the results below the input: integer RGB values, CSS function strings, normalized floats and the HSL equivalent.
4. Copy any value directly from the result rows for use in your stylesheet or design tool.

How hex to rgb conversion works

A hex color code represents red, green and blue channels as hexadecimal numbers. Each pair of digits maps to one channel on a scale from 00 (0) to FF (255). To convert, split the string into its component pairs and parse each as a base-16 integer.

For example, the hex code #3b82f6 splits into 3b, 82 and f6. Converting each pair: 3b in hex is 3 x 16 + 11 = 59, 82 is 8 x 16 + 2 = 130, and f6 is 15 x 16 + 6 = 246. The resulting RGB value is rgb(59, 130, 246).

Shorthand codes like #f00 expand by doubling each digit before parsing, so #f00 becomes #ff0000, which is pure red at rgb(255, 0, 0).

Common hex codes and their RGB values

This reference table shows frequently used colors converted from hex to rgb format. Use it as a quick lookup when working on web projects.

Understanding 4-digit and 8-digit hex codes

While 3-digit and 6-digit hex codes are the most common, CSS Color Module Level 4 introduced 4-digit and 8-digit variants that include an alpha channel for transparency. When you enter one of these formats into this hex to rgb color tool, it outputs both the standard rgb() string and the rgba() string with the opacity value.

In an 8-digit code like #0000ff80, the first six digits represent blue (0000ff) and the last two represent alpha (80). The hex value 80 equals 128 in decimal, which divided by 255 gives approximately 0.502, meaning roughly 50% opacity. A 4-digit code like #fff8 expands to #ffffffff style logic: #fff8 becomes #ffffff88, where 88 in hex is 136, yielding an alpha of about 0.533.

When to use hex versus RGB in CSS

Both hex and RGB notations produce identical colors in the browser, but each has practical advantages. Hex codes are compact and widely recognized in design tools, making them convenient for copying values between Figma, Sketch and your stylesheet. They are also easy to scan visually once you learn the pattern.

RGB functional notation is preferable when you need to adjust opacity dynamically, since rgba() makes the alpha channel explicit. It is also easier to manipulate programmatically if you are generating colors with JavaScript or CSS custom properties. If you need to go the other direction, use the rgb to hex converter. For print workflows, you may want to convert your hex code to rgb and then onward using the hex to cmyk tool.

Converting RGB to HSL

HSL stands for Hue, Saturation and Lightness, and many designers find it more intuitive than RGB because hue maps directly to a position on the color wheel (0 to 360 degrees), saturation controls intensity (0% to 100%) and lightness adjusts brightness (0% is black, 100% is white).

The conversion from RGB to HSL involves normalizing the red, green and blue values to a 0 to 1 range, finding the maximum and minimum channels, computing lightness as their average, and deriving saturation and hue from the differences. This hex to rgb converter performs that calculation automatically so you get all three representations at once. If you already have HSL values and need hex, try the hsl to hex tool instead.

Worked examples