Can I Use Hexadecimal RGBA Colors in CSS?

Can I Use Hexadecimal RGBa in CSS?

The traditional way to write hexadecimal colors in CSS is using the #RRGGBB format. For example:

background-color: #ff0000; /* red */

To achieve transparency, you can use the RGBA format, which includes an alpha channel:

background-color: rgba(255, 0, 0, 0.5); /* translucent red */

However, there is currently no direct way to specify partial transparency in hexadecimal. You cannot use the following syntax:

background-color: #ff000088;

Future Support in CSS Color Module Level 4

The upcoming CSS Color Module Level 4 is expected to support 4-digit and 8-digit hexadecimal RGBA notation. The syntax would be as follows:

8-digit:

#RRGGBBAA

4-digit:

#RGBA

Practical Use Today

While browser support for this notation is still limited, you can use it with a fallback for older browsers:

figure {
  background: #FEFE7F;
  color: #3F3FFE;

  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);

  background: #ffff007F;
  color: #0000ffbe;
}

This ensures that modern browsers will use the transparent hex colors, while older browsers will fall back to the non-transparent colors.

The above is the detailed content of Can I Use Hexadecimal RGBA Colors in CSS?. For more information, please follow other related articles on the PHP Chinese website!