CSS: hexadecimal color opacity?

Question

I accidentally put a hexadecimal color with two extra digits and noticed that in Google Chrome it affects the color opacity as well as function rgba().

Sort of like this:

body {
    background-color: #ff0000;
}

.com-opacidade{
  height: 100px;
  background-color: #fff99999;
}

.sem-opacidade{
  height: 100px;
  background-color: #fff999;
}

<div class="com-opacidade"></div>
<div class="sem-opacidade"></div>

Note that the .com-opacidade is clearer because of 99 at the end of the background-color.

I think I understand more or less how this works, but I need to know more details:

• Since when does it work? It’s a new feature?

• Which browsers do you support? So far, I’ve only tried this on Google Chrome.

• The logic of actual opacity is in the last two characters?

• There is some variation in the number of characters, as in the case of fff and ffffff? That is, in the case of opacity, it has some shorter declaration, or it is always necessary to put the 8 characters?

Answer 1

This format is also known as #rrggbbaa where aa corresponds to the channel alpha

According to the kennel is currently a well accepted format. However, it is in the CSS Module 4 specification: https://caniuse.com/#feat=css-rrggbbaa

Official W3C Draft Documentation: https://drafts.csswg.org/css-color/#Hex-Notation

And yes you can use the shorthand with 4 digits: ex. #0003

4 digits
This is a Shorter Variant of the 8-Digit Notation, "Expanded" in the same way as the 3-Digit Notation is. The first Digit, Interpreted as a hexadecimal number, specifies the red Channel of the color, Where 0 represents the minimum value and f represents the Maximum. The next three digits represent the green, blue, and alpha Channels, respectively.

4 digits
"This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue and alpha channels, respectively."

Example of opacity with shorthand #rgba 4 digits

.item {
  width: 100px;
  height: 100px;
  background-color: #0ff3; /*4 digitos*/
  border: 1px solid #000;
}
body {
    background-image: url(https://placecage.com/100/100);
    background-size: cover;
}

<div class="item"><h4>1</h4></div>

Support of the Browser currently. (Brasil 92%)

---

TIP: Here is a list of values corresponding to color opacity percentage.

Alpha % Hex Num
100%    FF  255
99% FC  252
98% FA  250
97% F7  247
96% F5  245
95% F2  242
94% F0  240
93% ED  237
92% EB  235
91% E8  232
90% E6  230
89% E3  227
88% E0  224
87% DE  222
86% DB  219
85% D9  217
84% D6  214
83% D4  212
82% D1  209
81% CF  207
80% CC  204
79% C9  201
78% C7  199
77% C4  196
76% C2  194
75% BF  191
74% BD  189
73% BA  186
72% B8  184
71% B5  181
70% B3  179
69% B0  176
68% AD  173
67% AB  171
66% A8  168
65% A6  166
64% A3  163
63% A1  161
62% 9E  158
61% 9C  156
60% 99  153
59% 96  150
58% 94  148
57% 91  145
56% 8F  143
55% 8C  140
54% 8A  138
53% 87  135
52% 85  133
51% 82  130
50% 80  128
49% 7D  125
48% 7A  122
47% 78  120
46% 75  117
45% 73  115
44% 70  112
43% 6E  110
42% 6B  107
41% 69  105
40% 66  102
39% 63  99
38% 61  97
37% 5E  94
36% 5C  92
35% 59  89
34% 57  87
33% 54  84
32% 52  82
31% 4F  79
30% 4D  77
29% 4A  74
28% 47  71
27% 45  69
26% 42  66
25% 40  64
24% 3D  61
23% 3B  59
22% 38  56
21% 36  54
20% 33  51
19% 30  48
18% 2E  46
17% 2B  43
16% 29  41
15% 26  38
14% 24  36
13% 21  33
12% 1F  31
11% 1C  28
10% 1A  26
9%  17  23
8%  14  20
7%  12  18
6%  0F  15
5%  0D  13
4%  0A  10
3%  08  8
2%  05  5
1%  03  3
0%  00  0

Answer 2

This 8-digit pattern was suggested at the end of 2014 through CSS Color Module Level 4, but only in mid-2016 did some browsers get support (see here in Can I Use), who are: Chrome, Firefox, Safari and Opera. It’s a new feature, but it’s not official yet.

The last 2 characters are a hexadecimal representation of the opacity, ranging from 00 to ff, that is to say ff = 1 (totally opaque) and 00 = 0 (fully transparent). As the hexadecimal numbers are 16 (from 00 to ff), 50% transparency (half, or 0.5), for example, it would be equal to hexadecimal 80 (#fff99980).

body {
    background-color: #ff0000;
}

.com-opacidadeHex{
  height: 100px;
  background-color: #fff99980;
}

.com-opacidadeRgba{
   margin-top: 1px;
  height: 100px;
  background-color: rgba(255, 249, 153, .5);
}

<div class="com-opacidadeHex">Notação hexa 50%</div>
<div class="com-opacidadeRgba">Notação RGBA 50%</div>

In this reply on Soen you have more detailed information.