How is a hex color converted to RGB?

A hex color encodes three channels in base 16. Each pair of digits is one channel from 00 to ff, which is 0 to 255 in decimal. So #3366ff becomes red 51, green 102, blue 255. Three-digit shorthand like #36f is expanded by doubling each digit first.

What does the opacity field do?

The opacity percentage becomes the alpha channel of the rgba() output, scaled from 0 to 1. A value of 100 percent produces an alpha of 1 (fully opaque), 50 percent gives 0.5, and 0 percent gives a fully transparent color.

What if my hex already has an alpha pair?

Eight-digit hex like #3366ff80 includes an alpha byte. The converter reads that byte as a base alpha and multiplies it by the opacity percentage you enter, so the two combine rather than one overriding the other.

What is the modern CSS Color 4 form?

CSS Color Module Level 4 allows space-separated channels with a slash before the alpha, like rgb(51 102 255 / 80%). It is equivalent to the comma-separated rgba() syntax and is supported by all current browsers, but the older rgba() form remains the safest for wide compatibility.

Why show a checkerboard behind the swatch?

The checkerboard makes partial transparency visible — you can see the background through a low-alpha color, which a solid swatch alone would hide. The second solid swatch shows how the color looks composited over an opaque surface.

Hex to CSS rgba() String Converter

Turn a hex color into a CSS rgba() string

The Hex to CSS rgba() String Converter takes a hex color and an opacity and produces a copy-ready CSS color string. It outputs the classic comma-separated rgba() form, a plain rgb() form, and the modern CSS Color 4 slash-alpha syntax, with a live swatch over a transparency checkerboard so you can judge the alpha at a glance.

How it works

A hex color packs three 8-bit channels into base 16. The converter splits the string into pairs and parses each pair as a 0–255 value:

#3366ff -> r = 0x33 = 51, g = 0x66 = 102, b = 0xff = 255

Shorthand 3-digit and 4-digit hex are expanded by doubling each digit (#36f becomes #3366ff). If the hex carries an eighth-digit alpha byte, that byte is divided by 255 to get a base alpha. The opacity percentage you enter is converted to a 0–1 fraction and multiplied with the base alpha, producing the final alpha channel used in the rgba() string.

Example

Entering #3366ff at 80 percent opacity yields rgba(51, 102, 255, 0.8). The equivalent CSS Color 4 form is rgb(51 102 255 / 80%). If you instead enter #3366ff80 at 50 percent, the built-in alpha of about 0.5 is multiplied by 0.5 to give roughly 0.25.

Notes

For maximum browser support the comma rgba() form is the safest choice; the space-and-slash form is cleaner but newer. Alpha is rounded to three decimal places and trailing zeros are trimmed so the output stays tidy.