Representação hexadecimal de uma cor com canal alfa?

117

Existe um W3 ou qualquer outro padrão digno de nota sobre como representar uma cor (incluindo canal alfa) em formato hexadecimal?

É #RGBA ou #ARGB?

Patrick Klug
fonte
8
Ele está chegando na fonte CSS Color Level 4 (veja o quarto ponto)
Šime Vidas
@ ŠimeVidas se você tivesse colocado isso em uma resposta, eu teria votado em você.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
@cirosantilli Acho que preciso do representante? :-P
Šime Vidas
1
@ ŠimeVidas lol, se você quiser compartilhar um pouco, então ... =)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Há uma questão semelhante específica de CSS sobre isso aqui: CSS hexidecimal RGBA?
James Donnelly

Respostas:

82

No CSS 3, para citar a especificação, "não há notação hexadecimal para um valor RGBA" (consulte as especificações do CSS de nível 3 ). Em vez disso, você pode usar a notação funcional rgba () com decimais ou porcentagens, por exemplo, rgba (255, 0, 0, 0,5) seria 50% vermelho transparente. Os canais RGB são 0-255 ou 0% -100%, alfa é 0-1.

No CSS 4 *, você pode especificar o canal alfa usando o 7º e o 8º caracteres de uma cor hexadecimal de 8 dígitos ou o quarto caractere de uma cor hexadecimal de 4 dígitos (consulte as especificações CSS Nível 4 *)

Desde maio de 2019, espera-se que mais de 80% dos usuários entendam o formato #RGBA

  • O Firefox suporta esta sintaxe desde o Firefox 49 ( Mozilla bug 567283 ).
  • O Safari oferece suporte a essa sintaxe desde o Safari 10.
  • O Chrome é compatível com essa sintaxe desde o Chrome 62. Para versões anteriores, você pode ativar os recursos experimentais da web para usar essa sintaxe. Consulte o problema 618472 do Chromium e o bug 150853 do Webkit .
  • Aplicativos Android direcionados ao Android P ou mais recente podem usar esta sintaxe
  • O Opera oferece suporte a essa sintaxe no Opera 52 (ou Opera 39 quando os recursos experimentais da web estão ativados).
  • IE 11 e EdgeHTML 18 (Edge 44) não oferecem suporte a esta sintaxe. As versões do Edge baseadas em Chromium suportam esta sintaxe.

Informações atualizadas de suporte do navegador estão disponíveis em CanIUse.com

* Tecnicamente ainda em rascunho, mas dado o suporte do navegador, é improvável que seja alterado.

Thelem
fonte
2
A partir de agora, o Mozilla (Firefox 49) parece ser compatível com #RRGGBBAA e #RGBA
Shiyaz
92

Parece que não há formato alfa hexadecimal: http://www.w3.org/TR/css3-color/

De qualquer forma, se você usar um pré-processador CSS como o SASS, poderá passar um hex para rgba: background:

rgba(#000, 0.5);

E o pré-processador apenas converte o código hexadecimal para rgb automaticamente.

guitarranalon
fonte
15

Não tenho certeza se existe um padrão oficial

RGBA é a representação que vi para Web Macromedia e outros usam ARGB

Eu acredito que RGBA é a representação mais comum.

Se ajudar, isso é do W3 para CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (Patrick): citação do link W3 acima

Ao contrário dos valores RGB, não há notação hexadecimal para um valor RGBA

Kelly Gendron
fonte
2
Além disso, a função CSS para especificar cores com alfas é rgba ()
Âmbar
8
do link W3 que você postou: Ao contrário dos valores RGB, não há notação hexadecimal para um valor RGBA.
Patrick Klug
2
Já vi # RGB, A antes. Esquisito.
Joshua,
Para drawables Android, parece ser ARGB: developer.android.com/reference/android/graphics/drawable/…
Derek Kurth
10

O Chrome 52+ é compatível com alfa hexadecimal:

background: #56ff0077;

Para navegadores mais antigos, você terá que usar:

background-color: rgba(255, 220, 0, 0.3);
Oded Breiner
fonte
3
Não, não faz, a menos que você habilite recursos experimentais da web, porque estava causando problemas no Android. Veja minha resposta acima para detalhes de suporte do navegador.
thelem de
3

Você pode tentar colocar a cor hexadecimal no seletor de cores do GIMP ou loja de fotos para obter o valor RGB e, em seguida, usar o valor alfa. por exemplo. vermelho é #FF0000ou rgb(255,0,0) se você quiser vermelho com um valor alfa de 0,5, então rgba(255,0,0,.5).

Talvez não seja exatamente o que você queria, mas espero que ajude.

Jinjubei
fonte
1
Isso foi rejeitado, o que parece um pouco duro. Não responde à pergunta feita, mas a pergunta não diz por que eles querem saber. Se eles querem apenas usar uma cor RGBA em CSS, então esta resposta está correta.
thelem