Color Opacity Calculator
Pick a HEX color and an opacity level to get the rgba(), 8-digit hex, and CSS variable values instantly. Preview the result over a transparent background.
Frequently Asked Questions
What is color opacity in CSS?
Opacity (alpha) controls how transparent a color is. A value of 1 (100%) is fully opaque, 0 (0%) is fully transparent. CSS supports alpha in rgba(), hsla(), and 8-digit hex (#RRGGBBAA).
What is the difference between rgba() and hex8?
rgba() uses red, green, blue 0-255 values plus an alpha 0-1. Hex8 uses the same RRGGBB hex digits followed by two hex digits for alpha (00-FF). Both achieve the same result.
What is the hex alpha value for 50% opacity?
50% opacity is 128 in decimal, which is 80 in hex. So a red (#FF0000) at 50% opacity would be #FF000080.
Can I use this for CSS backgrounds?
Yes. Use the rgba() output directly in any CSS color property: background-color: rgba(255, 0, 0, 0.5); or use the hex8 value in modern browsers.
CSS Color Transparency Formats
| Format | 50% red example | Browser support |
|---|---|---|
| rgba() | rgba(255, 0, 0, 0.5) | All browsers (IE9+) |
| 8-digit HEX | #FF000080 | All modern browsers (Chrome 62+) |
| hsla() | hsla(0, 100%, 50%, 0.5) | All browsers (IE9+) |
| oklch() | oklch(0.63 0.26 29 / 50%) | Chrome 111+, Firefox 113+, Safari 16.4+ |
| opacity prop | opacity: 0.5 | Affects entire element incl. children |
HEX Alpha Reference (common values)
The two alpha hex digits range from 00 (fully transparent) to FF (fully opaque).