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.