Is There a Concise Hexadecimal Notation for RGBA Colors in CSS?

CSS Hexadecimal RGBA Notation

Problem: Currently, CSS supports RGBA color notation using decimal values (e.g., rgba(255, 0, 0, 0.5)). Is there a more concise way to specify partially transparent colors in hexadecimal?

Answer:

The CSS Color Module Level 4 (which is currently in draft form) is expected to introduce support for 4 and 8-digit hexadecimal RGBA notation.

How it Works

8-digit Notation:

• The first 6 digits represent the hex values for red, green, and blue channels.
• The last 2 digits represent the alpha channel, with 00 being fully transparent and FF being fully opaque.

4-digit Notation:

• The first digit represents the red channel.
• The next three digits represent the green, blue, and alpha channels, respectively.

Example

Using the 8-digit notation, the following hex color represents a slightly transparent blue:

#0000ffcc

This is equivalent to the following RGBA notation:

rgba(0, 0, 100%, 80%)

Browser Support

At the time of writing this article (in early 2015), no browsers supported #RRGGBBAA color notation. However, you can use the following fallback technique to start using it today:

figure {
  background: #FEFE7F;
  color: #3F3FFE;
  
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  background: #ffff007F;
  color: #0000ffbe;      
}

The above is the detailed content of Is There a Concise Hexadecimal Notation for RGBA Colors in CSS?. For more information, please follow other related articles on the PHP Chinese website!