8-digit hex colors with alpha: how #RRGGBBAA and #RGBA shorthand work

A hex color can carry transparency directly in the string. #1E90FF80 is dodger blue at roughly half opacity, with no rgba() needed. This is the 8-digit hex form, standardized in CSS Color Level 4 and supported in every current browser. It is useful, but the alpha byte trips people up because it is hexadecimal, not a percentage.

The format

An 8-digit hex is #RRGGBBAA: the familiar six digits for red, green, and blue, plus a fourth pair for alpha. Each pair is a byte from 00 to FF, meaning 0 to 255.

background: #1E90FF80;  /* dodger blue, alpha 128/255 */

There is also a 4-digit shorthand, #RGBA, that mirrors the 3-digit #RGB rule. Each digit is doubled to form a byte:

#F00F  ->  #FF0000FF   /* opaque red */
#0008  ->  #00000088   /* black at alpha 136 */

So #RGBA expands by repeating each character, exactly as #RGB does, just with the extra alpha nibble on the end.

Mapping the alpha byte to 0 to 1

The gotcha is that CSS rgba() alpha runs from 0 to 1, but the hex alpha runs from 00 to FF, which is 0 to 255. To convert, divide the decimal value of the alpha pair by 255.

Note that 50 percent is 80, not 7F. The value 128 is 80 in hex because 0x80 equals 128, and 255 * 0.5 rounds to 128. The common mistake is assuming half of FF is 7F (127), which is one step off. If you want an exact percentage, compute round(percent / 100 * 255) and write that in hex.

Converting to and from rgba

Going from 8-digit hex to rgba():

• Split into four pairs.
• Read the first three as decimal for the RGB channels.
• Divide the last pair's decimal value by 255 for alpha.

#1E90FF80 becomes rgba(30, 144, 255, 0.502). The reverse multiplies the 0 to 1 alpha by 255 and rounds to a hex pair.

Because of the rounding, a round trip from rgba(..., 0.5) to hex and back lands on 0.502, not 0.5. That is harmless visually but can produce noisy diffs if you keep converting the same value. Pick one representation as the source of truth.

Browser support and gotchas

• Support is universal in current browsers, but very old ones predating CSS Color Level 4 ignore the alpha pair or reject the whole value. If you must support ancient environments, use rgba() instead.
• Do not confuse length rules. Legal hex lengths are 3, 4, 6, and 8 digits. A 5-digit or 7-digit hex is invalid and the browser drops the declaration silently, which looks like your color simply vanished.
• Opacity is not the same thing. #1E90FF80 sets the color's own alpha. The opacity property instead fades the entire element and its children, including text and borders. They look similar in isolation but compose very differently when elements overlap.
• Case does not matter. #1e90ff80 and #1E90FF80 are identical. Pick one style and keep it consistent in your codebase.

To see the exact opacity any alpha byte produces, or to convert an 8-digit hex into rgba() and HSL, paste it into the Color Converter and read the values back directly.