CSS: color opacity through hexadecimal?

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

According to the caniuse it is currently a well accepted format. Although this is in the CSS Module 4 specification: link

Official W3C Draft Documentation: link

And 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 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. 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>

Browser support currently. (Brazil 92%)

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

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

This 8-digit standard was suggested in late 2014 through the CSS Color Module Level 4 , but only in the middle of 2016 that some browsers are now supported ( see here in Can I Use ), which 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 opacity, ranging from 00 to ff , that is ff = 1 (totally opaque) and 00 = 0 (fully transparent). Since the hexadecimal numbers are 16 (from 00 to ff ), a transparency of 50% (half, or 0.5 ), for example, would be equal to the 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>

This answer in SOen has more detailed information.