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.

What is the Hex to CSS rgba() String Converter?

Free hex to CSS rgba() converter. Enter a hex color and an opacity percentage to get a copy-ready rgba() string, a plain rgb() string, and the modern CSS Color 4 slash-alpha form, with a live transparency swatch. Supports 3, 4, 6 and 8-digit hex. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Hex to CSS rgba() String Converter

Name: Hex to CSS rgba() String Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

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.

Which output format to use

Format	Example output	When to use
`rgba()`	`rgba(51, 102, 255, 0.8)`	Maximum browser compatibility, CSS 2.1+
`rgb()` with alpha	`rgb(51, 102, 255, 0.8)`	Modern browsers; CSS spec allows alpha in `rgb()`
CSS Color 4 slash	`rgb(51 102 255 / 80%)`	Clean and readable; all current browsers

Worked examples

Example 1 — standard hex with opacity:

Entering #3366ff at 80 percent opacity yields:

rgba(51, 102, 255, 0.8) — copy this for almost all projects
rgb(51 102 255 / 80%) — the modern equivalent

Example 2 — 8-digit hex with a second opacity:

If you have #3366ff80 (which already encodes 50% alpha in its eighth pair) and you set opacity to 50%, the combined alpha is 0.5 × 0.5 = 0.25, giving rgba(51, 102, 255, 0.25). This is useful when you receive a branded color with a built-in transparency from a design tool like Figma.

Example 3 — shorthand expansion:

#f0a expands to #ff00aa → rgba(255, 0, 170, 1).

Practical tips

Design-to-code handoff: Figma and Sketch export colors as hex. Paste the hex here to get an immediately usable CSS value with a custom opacity.
Overlays and modals: Semi-transparent dark overlays are typically rgba(0, 0, 0, 0.5) — enter #000000 at 50%.
Check on a checkerboard: The live swatch shows the color as it really appears over a transparent background, not composited over white, so you can judge low-alpha colors accurately.
Tailwind and CSS variables: The CSS Color 4 slash form pairs cleanly with CSS custom properties: --brand: 51 102 255; color: rgb(var(--brand) / 80%);

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. Everything runs in your browser — no color data is uploaded.