Should You Specify CSS Transparency with HEX or RGBA?

When you want a translucent background or decorative color in CSS, should you write it using HEX or RGBA? Both formats can specify transparency, and the same underlying color with the same opacity produces the same result. The main differences concern notation, precision, and how convenient the value is to adjust. This guide compares eight-digit HEX with RGBA using two information cards, then shows why the background underneath matters more than the choice of notation.

Should you choose HEX or RGBA for opacity?

CSS (Cascading Style Sheets) controls the visual appearance of webpages. A six-digit HEX code represents the red, green, and blue channels of a color in hexadecimal notation. To include an alpha channel—the value that controls opacity—append two more digits, making eight-digit HEX. For example, take blue ■#2563EB. At 20% opacity, it becomes ■#2563EB33. The final 33 represents 51 in hexadecimal, and 51 divided by 255 is exactly 0.2. An alpha suffix of 00 is fully transparent, while FF is fully opaque.

RGBA stands for Red, Green, Blue, and Alpha. The equivalent numeric notation is rgba(37, 99, 235, 0.2). Its final value is the opacity, so you can change 0.2 to 0.4 without converting hexadecimal digits. That can be convenient when comparing several strengths of the same color. Modern CSS also accepts rgb(37 99 235 / 20%), while rgba() remains valid and widely supported.

Eight-digit HEX is convenient when your project already stores colors as HEX values and the opacity is fixed. RGBA or modern rgb() syntax is often easier when you frequently tweak opacity or discuss it as a number or percentage. An eight-digit HEX alpha channel has 256 possible steps, so not every arbitrary decimal value can be represented with perfect precision. Neither format is inherently more visually accurate for an equivalent color: choose the one that makes your CSS easier to maintain.

Example: compare two translucent information cards on white

Place two information cards over a solid white ■#FFFFFF surface. Both use blue ■#2563EB at 20% opacity: the first with eight-digit HEX ■#2563EB33, and the second with rgba(37, 99, 235, 0.2). These two values describe exactly the same color and alpha, so they produce the same appearance against the same white background. Set the card text to dark blue-gray ■#1E293B and give each card a solid blue ■#2563EB border.

<div class="alpha-demo">
  <section class="alpha-card alpha-card--hex">
    <h3>HEX format</h3>
    <p>Information card with 20% blue opacity</p>
  </section>
  <section class="alpha-card alpha-card--rgba">
    <h3>RGBA format</h3>
    <p>Same color and opacity as the first card</p>
  </section>
</div>

.alpha-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
  background-color: rgb(255 255 255);
}
.alpha-card {
  flex: 1 1 220px;
  padding: 20px;
  border: 2px solid rgb(37 99 235);
  border-radius: 12px;
  color: rgb(30 41 59);
}
.alpha-card--hex {
  background-color: ■#2563EB33;
}
.alpha-card--rgba {
  background-color: rgba(37, 99, 235, 0.2);
}

Only each card’s background-color is translucent; the text and border retain their own full opacity. Blending the blue over white produces an approximate pale-blue fill of ■#D3E0FB. The contrast ratio between dark blue-gray ■#1E293B text and this resulting fill is about 11.02:1, above the Web Content Accessibility Guidelines (WCAG) 2.2 minimum of 4.5:1 for normal-sized text. The solid blue ■#2563EB border against the pale-blue ■#D3E0FB interior measures about 3.89:1. Neither of these measured ratios should be assumed to remain the same if the underlying surface changes.

What changes when the background underneath is different?

Transparency means the final displayed color depends on the backdrop. Put the same 20%-opaque blue ■#2563EB33 over deep navy ■#0F172A, and the result becomes approximately dark blue ■#132651 instead. The previously chosen text color ■#1E293B has a contrast ratio of only about 1.01:1 against that result, well below the normal-text requirement. You would need to reconsider the text color—for instance, white ■#FFFFFF—and check the new combination against the actual adjacent background.

Also distinguish color alpha from the CSS opacity property. Applying opacity: 0.2 to the entire card fades the text and border along with its background. To make just the background translucent, put an alpha value in the background-color declaration, as in the example. Recheck the final appearance whenever the background, layout, or overlapping elements change.

HueRoll can supply a six-digit HEX code for the selected color and show its contrast against white or black. It does not directly provide an eight-digit HEX code for copying, or automatically calculate the final contrast of a translucent color over an arbitrary background. Use it to pick the base color, add the alpha in CSS, and then evaluate the resulting text-to-background pairing in the finished design.