Guide

RGBA & Alpha Transparency in CSS

Alpha looks simple — a fourth number between 0 and 1 — but the way it composites against whatever sits behind it has practical consequences for color choice, accessibility, and performance.

Last reviewed on 2026-10-03

RGBA in one paragraph

RGBA stands for red, green, blue, and alpha. The first three channels are the same 0–255 values you'd write in rgb(). The fourth, alpha, is a number from 0 (fully transparent) to 1 (fully opaque). In CSS:

background: rgba(108, 92, 231, 0.4);
/* modern equivalent */
background: rgb(108 92 231 / 0.4);

The home converter shows the RGBA chip alongside HEX, RGB, and HSL — every color you type out includes its 1.0-alpha RGBA form by default.

RGB vs RGBA: the only difference is alpha

The "A" in RGBA is alpha — RGB plus one transparency channel. rgb(255, 0, 0) and rgba(255, 0, 0, 1) are the same opaque red. If you leave alpha out, it defaults to 1 (fully opaque), which is why plain rgb() is never see-through. In modern CSS the two functions are aliases: rgb() accepts an alpha and rgba() accepts the space-separated syntax, so pick whichever reads better.

• Larger alpha = more opaque, less transparent. 1 is solid, 0.5 is half see-through, 0 is invisible.
• Alpha can also be a percentage: rgb(255 0 0 / 50%) equals rgba(255, 0, 0, 0.5).
• Values outside 0–1 are clamped, so rgba(255, 0, 0, 1.5) is just opaque red.

What RGB values make something fully transparent?

Any of them. At alpha 0 the red, green, and blue numbers contribute nothing to the result, so rgba(0, 0, 0, 0), rgba(255, 255, 255, 0) and rgba(12, 34, 56, 0) all paint nothing. The CSS keyword transparent is defined as rgba(0, 0, 0, 0). For a transparent text box, set background: transparent (or any RGB with alpha 0) and keep the text color opaque. The RGB part only matters again in gradients — see below.

What alpha actually does

Alpha is not opacity in the loose sense. It is a blending coefficient. When the browser paints a semi-transparent pixel, it computes:

result = (alpha × foreground) + ((1 − alpha) × background)

Per channel. So rgba(255, 0, 0, 0.5) over a white background gives rgb(255, 128, 128), not "half-strength red." The visual color depends on whatever is behind the element. This is why the same RGBA value can look completely different on a dark page versus a light one.

A worked example: what color is rgba(255, 0, 0, 0.08)? It is a very faint red tint. Over white it resolves to rgb(255, 235, 235) (#FFEBEB), a barely-pink wash; over black it resolves to rgb(20, 0, 0) (#140000), which is nearly black. Same value, two very different results.

The formula above is the simple case of the source-over operator from the W3C Compositing and Blending specification, which assumes the background is opaque. When the backdrop is itself translucent, the full version also combines the alphas: result alpha = α_s + α_b × (1 − α_s). That is why two stacked 50% layers end up 75% opaque, not 100%.

This compositing happens for every pixel of every overlapping layer. A semi-transparent button on a semi-transparent card on a gradient background runs the formula three times, in order, from back to front.

RGBA vs the opacity property

RGBA sets the alpha of one specific color value. The opacity CSS property sets the alpha of the entire element and everything inside it, including text, child elements, borders, and backgrounds.

• Use rgba() when only the background (or only the border) should be translucent and the text inside should remain solid and readable.
• Use opacity when fading a whole component in or out — for example, a tooltip animation.

A common mistake: setting opacity: 0.6 on a card to mute the background, then wondering why the text is hard to read. The fix is to keep the text at full opacity and only soften the background using RGBA.

Why transparent text looks gray

Whether you use opacity on the element or an alpha in color, translucent text is composited with whatever is behind it. Black text at 0.6 alpha on white resolves to rgb(102, 102, 102) — a plain gray, #666666. That is expected, not a bug. If you want gray text, write the solid gray directly: it renders the same on that background, does not change when the background does, and its contrast ratio can be checked honestly.

RGBA vs 8-digit hex (#RRGGBBAA)

Modern CSS accepts an 8-digit hex code, where the last two characters encode alpha as a hexadecimal byte from 00 (transparent) to FF (opaque):

background: #6C5CE740;   /* alpha = 0x40 = 64/255 ≈ 0.25 */
background: #6C5CE7CC;   /* alpha = 0xCC = 204/255 = 0.8 */

Both notations produce identical pixels. Trade-offs:

For a handful of common values: 0.1 ≈ 1A, 0.25 ≈ 40, 0.5 ≈ 80, 0.75 ≈ BF, 0.9 ≈ E6. The full table:

Alpha to hex lookup table

Each value is alpha × 255, rounded, written as two hex digits. Append it to a 6-digit hex code to get #RRGGBBAA.

There is also a 4-digit short form, #RGBA, where each digit is doubled: #F008 = #FF000088 (alpha 136/255 ≈ 0.53).

Converting rgba() to 8-digit hex (and back)

1. Convert each of R, G, B to two hex digits, exactly as for a normal hex code: rgba(108, 92, 231, 0.4) → 6C 5C E7.
2. Multiply alpha by 255 and round: 0.4 × 255 = 102.
3. Convert that to hex: 102 = 66.
4. Join them: #6C5CE766.

To go back, split the code into pairs, convert each pair from hex to decimal, and divide the last one by 255: #6C5CE740 → 108, 92, 231 and 64 / 255 ≈ 0.25, so rgba(108, 92, 231, 0.25).

When alpha is 1, the alpha byte is FF and you can drop it: rgba(0, 59, 68, 1) is #003B44 (or #003B44FF), and rgba(0, 0, 247, 1.00) is #0000F7. For opaque colors the RGB to HEX converter does steps 1 and 4 for you; just append the alpha byte from the table above.

Transparent gradients: the gray-band gotcha

Fading a color out with linear-gradient(red, transparent) used to produce a muddy gray band in the middle, because transparent is transparent black and older engines interpolated the RGB channels straight toward 0, 0, 0. The CSS specification now requires gradients to interpolate in premultiplied alpha, where a fully transparent stop contributes no color at all, and current browsers follow it — so the fade stays red all the way. If you need to support older browsers, or just want to be explicit, fade to the same color at zero alpha:

/* safe everywhere */
background: linear-gradient(rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
/* same thing in 8-digit hex */
background: linear-gradient(#FF0000FF, #FF000000);

When to reach for transparency

• Overlays. A dim layer on top of a hero image so the headline stays readable. Typical: rgba(0, 0, 0, 0.45) over photography.
• Borders. A border at rgba(255, 255, 255, 0.1) reads as a soft separator on a dark surface without competing with the content.
• Tinted hover states. A button can darken on hover by stacking a tiny rgba(0, 0, 0, 0.06) wash, which works no matter what color the underlying button is.
• Glassmorphism. Combining a translucent fill with backdrop-filter: blur() produces the frosted-glass look used on modern sidebars and modals.
• Shadows. Box and text shadows are usually defined as RGBA so they blend rather than punch a hard color through whatever is behind them.

Where transparency hurts

Accessibility

The contrast checker on the home page assumes solid colors. The moment alpha is involved, the actual contrast ratio depends on what shows through. For text-on-background combinations, always compute the contrast against the resolved color (the foreground composited onto the actual background), not against the half-transparent foreground. The safer rule: keep text fully opaque, and reserve transparency for purely decorative elements.

Performance

Translucent layers force the browser to alpha-composite. On a static page this is invisible. On a page with dozens of overlapping translucent panels, large blurred backdrops, or animations on transparent elements, the cost adds up — especially on mobile GPUs. If a section is suddenly janky after adding a frosted-glass effect, suspect the compositor.

Print and screenshots

Some print engines and older PDF tools flatten transparency in unpredictable ways. If a page is intended to be exported as PDF or printed, test the result, or supply a flat fallback color in a print stylesheet.

Choosing an alpha value

A practical scale that covers most UI work:

• 0.05 – 0.1 — barely-there washes, hover backgrounds, very faint dividers.
• 0.15 – 0.25 — soft tints, decorative overlays, ghost borders.
• 0.4 – 0.6 — medium overlays for legibility on imagery.
• 0.7 – 0.9 — readable translucent panels (modals, navbars).
• 1.0 — anywhere text appears, unless you're certain the contrast still works.

Working with alpha in code

JavaScript has direct access to the four channels through canvas APIs. Reading a pixel from a <canvas> returns four entries — R, G, B, A — each from 0 to 255. To convert a UI alpha to canvas alpha, multiply the 0–1 value by 255 and round.

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(108, 92, 231, 0.4)';
ctx.fillRect(0, 0, 100, 100);
const pixel = ctx.getImageData(50, 50, 1, 1).data;
// pixel = [108, 92, 231, 102]  (102 ≈ 0.4 × 255)

Common mistakes

• Using opacity when you meant rgba(). Drops the readability of all child text.
• Picking RGBA without a target background in mind. A 30% red on white reads pink; on dark gray it reads brown.
• Applying transparency to text. Even fully-saturated text at 60% alpha can fall below WCAG contrast minimums; the safer move is solid text on a dimmed background.
• Stacking too many translucent layers. Each composite step costs paint time; redesign before the third overlap.

Quick reference

• RGBA, rgb(... / α), and #RRGGBBAA all describe the same thing.
• Alpha is a blend coefficient, not a hidden property of the color itself.
• Use RGBA to fade one value; use opacity to fade an entire element tree.
• Test contrast against the visible result, not against the unblended foreground.

Frequently asked questions

What is the difference between RGB and RGBA in CSS?

RGBA is RGB with a fourth value, alpha, that controls transparency. rgb(255, 0, 0) and rgba(255, 0, 0, 1) are the same opaque red; rgba(255, 0, 0, 0.5) is the same red at 50% opacity. In modern CSS both functions accept an alpha value, so they behave identically.

Is a larger alpha more or less transparent?

Less transparent. Alpha measures opacity: 1 is fully opaque, 0 is fully transparent, and 0.8 is more solid than 0.2.

What is the default alpha value in RGBA if it is not specified?

1, meaning fully opaque. That is why a color written as rgb() or as a 6-digit hex code is never see-through.

What RGB values do I need for a transparent color?

Any. With alpha set to 0 the red, green, and blue values have no visible effect, so rgba(0, 0, 0, 0) and rgba(255, 255, 255, 0) both paint nothing. The CSS keyword transparent is shorthand for rgba(0, 0, 0, 0).

What color is rgba(255, 0, 0, 0.08)?

A very faint red tint whose final color depends on the background. Over white it shows as rgb(255, 235, 235), or #FFEBEB. Over black it shows as rgb(20, 0, 0), or #140000.

How do I convert rgba to hex?

Convert red, green, and blue to two hex digits each, then multiply alpha by 255, round, and append it as two more hex digits. rgba(108, 92, 231, 0.4) becomes #6C5CE766. If alpha is 1 you can drop the last pair: rgba(0, 59, 68, 1) is #003B44.

What is the hex code for 50% transparency?

80. Half of 255 is 127.5, which rounds to 128, or 80 in hex, so 50% transparent red is #FF000080.

Why does my transparent text look gray?

Because translucent text is blended with the background behind it. Black text at 0.6 alpha on white composites to rgb(102, 102, 102), which is gray. Use a solid gray color instead if that is the look you want, so the contrast does not change with the background.