Rappresentazione esadecimale di un colore con canale alfa?


117

Esiste un W3 o qualsiasi altro standard degno di nota su come rappresentare un colore (incluso il canale alfa) in formato esadecimale?

È #RGBA o #ARGB?


8
È in arrivo nella sorgente CSS Color Level 4 (vedere il quarto punto
elenco

@ ŠimeVidas se lo avessi inserito in una risposta, ti avrei votato.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

@cirosantilli Ti sembra che mi serva il rappresentante? :-P
Šime Vidas

1
@ ŠimeVidas lol, se ti interessa condividerne un po 'allora ... =)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

C'è una domanda simile specifica CSS su questo qui: CSS hexidecimal RGBA?
James Donnelly

Risposte:


82

In CSS 3, per citare le specifiche, "non esiste una notazione esadecimale per un valore RGBA" (vedere la specifica CSS livello 3 ). Invece è possibile utilizzare la notazione funzionale rgba () con decimali o percentuali, ad esempio rgba (255, 0, 0, 0,5) sarebbe rosso trasparente al 50%. I canali RGB sono 0-255 o 0% -100%, alfa è 0-1.

In CSS 4 *, puoi specificare il canale alfa utilizzando il settimo e l'ottavo carattere di un colore esadecimale a 8 cifre o il quarto carattere di un colore esadecimale a 4 cifre (vedi le specifiche CSS livello 4 *)

A partire da maggio 2019, ci si può aspettare che> 80% degli utenti comprenda il formato #RGBA

  • Firefox supporta questa sintassi da Firefox 49 ( bug di Mozilla 567283 ).
  • Safari supporta questa sintassi da Safari 10.
  • Chrome supporta questa sintassi a partire da Chrome 62. Per le versioni precedenti era possibile abilitare le funzionalità web sperimentali per utilizzare questa sintassi. Vedere il problema di Chromium 618472 e il bug Webkit 150853 .
  • Le app Android che hanno come target Android P o versioni successive possono utilizzare questa sintassi
  • Opera supporta questa sintassi in Opera 52 (o Opera 39 quando le funzionalità web sperimentali sono abilitate).
  • IE 11 e EdgeHTML 18 (Edge 44) non supportano questa sintassi. Le versioni di Edge basate su Chromium supporteranno questa sintassi.

Informazioni aggiornate sul supporto del browser sono disponibili su CanIUse.com

* Tecnicamente ancora in bozza, ma dato il supporto del browser è improbabile che venga modificato.


2
A partire da ora, Mozilla (Firefox 49) sembra supportare #RRGGBBAA e #RGBA
Shiyaz

92

Sembra che non esista un formato alfa esadecimale: http://www.w3.org/TR/css3-color/

Ad ogni modo, se usi un preprocessore CSS come SASS, puoi passare un esadecimale a rgba: background:

rgba(#000, 0.5);

E il preprocessore converte automaticamente il codice esadecimale in rgb.


15

Non sono sicuro che esista uno standard ufficiale-

RGBA è la rappresentazione che ho visto per Web Macromedia e altri usano ARGB

Credo che RGBA sia la rappresentazione più comune.

Se aiuta questo è da W3 per CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (Patrick): citazione dal link W3 sopra

A differenza dei valori RGB, non esiste una notazione esadecimale per un valore RGBA


2
Inoltre, la funzione CSS per specificare i colori con alfa è rgba ()
Amber

8
dal collegamento W3 che hai pubblicato: a differenza dei valori RGB, non esiste una notazione esadecimale per un valore RGBA.
Patrick Klug,

2
Ho già visto # RGB, A. Strano.
Joshua


10

Chrome 52+ supporta alfa esadecimale:

background: #56ff0077;

Per i browser meno recenti, dovrai utilizzare:

background-color: rgba(255, 220, 0, 0.3);

3
No, a meno che non abiliti le funzionalità web sperimentali, perché causava problemi su Android. Vedi la mia risposta sopra per i dettagli sul supporto del browser.
Thelem

3

Potresti provare a inserire il colore esadecimale nel selettore di colori di GIMP o negozio di foto per ottenere il valore RGB e quindi utilizzare il valore alfa. per esempio. il rosso è #FF0000o rgb(255,0,0) se si desidera un rosso con un valore alfa di 0,5 rgba(255,0,0,.5).

Forse non è esattamente quello che volevi, ma si spera che aiuti.


1
Questo è stato respinto, il che sembra un po 'duro. Non risponde alla domanda posta, ma la domanda non dice perché vogliono sapere. Se vogliono solo usare un colore RGBA in CSS, questa risposta è corretta.
Thelem
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.