11

Eu acidentalmente coloquei uma cor hexadecimal com dois dígitos a mais e notei que no Google Chrome isso afeta a opacidade da cor, assim como na função rgba().

Mais ou menos assim:

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 que o .com-opacidade está mais claro por conta do 99 no final da declaração do background-color.

Eu acho que entendi mais ou menos como isso funciona, mas preciso saber mais detalhes:

  • Desde quando isso funciona? É uma nova funcionalidade?

  • Quais navegadores suportam? Até então, eu só testei isso no Google Chrome.

  • A lógica da opacidade de fato está nos dois últimos caracteres?

  • Existe alguma variação do número de caracteres, como no caso do fff e ffffff? Ou seja, no caso da opacidade, tem alguma declaração mais curta, ou sempre é necessário colocar os 8 caracteres?

2 Respostas 2

10

Esse formato também é conhecido como #rrggbbaa onde aa corresponde ao canal alpha

Segundo o caniuse atualmente é um formato até bem aceito. Apesar disso está na especificação do Módulo 4 do CSS: https://caniuse.com/#feat=css-rrggbbaa

Documentação oficial do Draft da W3C: https://drafts.csswg.org/css-color/#hex-notation

E sim vc pode usar o shorthand com 4 dígitos: 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 dígitos
"Esta é uma variante mais curta da notação de 8 dígitos, "expandida" da mesma maneira que a notação de 3 dígitos. O primeiro dígito, interpretado como um número hexadecimal, especifica o canal vermelho da cor, onde 0 representa o valor mínimo e f representa o máximo. Os próximos três dígitos representam os canais verde, azul e alfa, respectivamente."

Exemplo de opacidade com shorthand #rgba 4 dígitos

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

Suporte dos Browser atualmente. (Brasil 92%)

inserir a descrição da imagem aqui


DICA: Aqui tem uma lista dos valores correspondentes ao porcentagem de opacidade da cor.

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
2
  • 2
    Valeu! dei +1 nas duas respostas. 23/11/2018 às 0:36
  • 1
    @WallaceMaxters valeu meu querido! Eu só não achei uma referência muito concreta da data, apesar de aparentemente ter sido em 2014, vi por ai coisas de 2011 falando sobre isso... Mas foi uma boa pergunta, nem imaginava que ainda não haviam perguntado sobre isso por aqui
    – hugocsl
    23/11/2018 às 10:22
9

Esse padrão de 8 dígitos foi sugerido no final de 2014 através do CSS Color Module Level 4, mas só em meados de 2016 que alguns navegadores passaram a ter suporte (veja aqui no Can I Use), que são: Chrome, Firefox, Safari e Opera. É uma nova funcionalidade, mas ainda não é oficial até agora.

Os 2 últimos caracteres são uma representação em hexadecimal da opacidade, podendo ir de 00 a ff, ou seja ff = 1 (totalmente opaco) e 00 = 0 (totalmente transparente). Como os números hexadecimais são 16 (de 00 a ff), uma transparência de 50% (metade, ou 0.5), por exemplo, seria igual ao 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>

Nesta resposta no SOen tem informações mais detalhadas.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .