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?


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.


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.


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


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,


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);

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.


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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.