How Does CSS Color Module Level 4 Simplify RGBA Color Notation with Hexadecimal Values?

Hexadecimal RGBA Notation in CSS: Unveiling the Future

Current Hexadecimal Color Notation

In CSS, hexadecimal notation is commonly used to specify colors. For example, #ff0000 represents pure red, and #rgba(255, 0, 0, 0.5) creates a translucent red color.

Introducing 4 and 8-Digit Hexadecimal RGBA Notation

The upcoming CSS Color Module Level 4 introduces the 4 and 8-digit hexadecimal RGBA notation, providing a more concise way to represent transparent colors in hexadecimal format.

8-Digit Hexadecimal Notation

RRGGBBAA

• The first 6 digits specify the RGB color like the standard 6-digit notation.
• The last two digits represent the alpha channel, with "00" for full transparency and "ff" for no transparency.
• For example, #0000ffcc represents a slightly-transparent blue (same as rgba(0, 0, 100%, 80%)).

4-Digit Hexadecimal Notation

RGBA

• The first digit specifies the red channel (like the first digit of the 8-digit notation).
• The remaining three digits represent the green, blue, and alpha channels, respectively, like in the standard rgba notation.
• For example, #0000 represents a fully transparent black (#0000 with the alpha channel set to 00).

Benefits of the New Notation

The 4 and 8-digit hexadecimal RGBA notation provides the following benefits:

• More concise than rgba notation, especially for colors with simple alpha values.
• Allows for easy conversion between hexadecimal and decimal representations.

Browser Support and Usage

The new hexadecimal RGBA notation is not supported in major browsers yet. It is expected to be supported in future versions.

Until then, you can use fallback syntax to support both modern and legacy browsers, as shown below:

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 How Does CSS Color Module Level 4 Simplify RGBA Color Notation with Hexadecimal Values?. For more information, please follow other related articles on the PHP Chinese website!