Skip to main content
Book Consultation →
Convert and inspect100% FreeInstant

HEX Color Opacity Calculator: 8-Digit HEX and RGBA

This free calculator turns a color and an opacity percentage into an 8-digit HEX code and an RGBA value. It also shows the solid color you get when it sits on top of a background.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

Opacity lets a color show what is behind it. CSS lets you write opacity in the color itself, either as rgba() with a number from 0 to 1, or as an eight-digit HEX with the opacity in the last two digits.

This calculator gives both forms, and works out the flat color that results over a background, which is handy for email, print and design tools without transparency.

How to Use This Tool

  1. Type the color.
  2. Enter the opacity as a percentage.
  3. Type the background color you expect behind it.
  4. Press Calculate and copy the format you need.

How the Calculation Works

The opacity percentage times 255 divided by 100 gives the alpha byte. The blended color for each channel is color × alpha + background × (1 − alpha). This is the standard alpha compositing formula.

Worked Example

#1d4ed8 at 50 percent is #1D4ED880 or rgba(29, 78, 216, 0.5). Over white it looks like #8EA7EC.

Common Uses

  • Overlays and shadows in CSS.
  • Finding a flat color that matches a transparent one.
  • Email templates and print files.
  • Design handoff.

Tips and Common Mistakes

  • Opacity 0 is fully transparent and 100 is fully solid.
  • The solid result changes with the background color.
  • Round alpha to two decimals in rgba().

Next, you may need the color converter, color mixer, gradient generator, color contrast checker.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

The last two digits are the opacity, from 00 (fully clear) to FF (fully solid). 50 percent opacity is 80 in HEX.
It is the single opaque color you would see when your semi-transparent color sits on the chosen background. It is useful where transparency is not supported.
It is supported in all modern browsers. Very old ones need rgba() instead.
Multiply the percentage by 2.55 and write the result in base 16. For 75 percent, 191 is BF.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.