Représentation hexadécimale d'une couleur avec canal alpha?


117

Existe-t-il un W3 ou une autre norme digne de mention sur la façon de représenter une couleur (y compris le canal alpha) au format hexadécimal?

Est-ce #RGBA ou #ARGB?


8
Il arrive dans la source CSS Color Level 4 (voir quatrième puce)
Šime Vidas

@ ŠimeVidas si vous aviez mis cela dans une réponse, je vous aurais voté pour.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

@cirosantilli Ai-je l'air d'avoir besoin du représentant? :-P
Šime Vidas le

1
@ ŠimeVidas lol, si vous voulez en partager alors ... =)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Il y a une question similaire spécifique à CSS à ce sujet ici: CSS hexidécimal RGBA?
James Donnelly

Réponses:


82

En CSS 3, pour citer la spécification, "il n'y a pas de notation hexadécimale pour une valeur RGBA" (voir la spécification CSS niveau 3 ). À la place, vous pouvez utiliser la notation fonctionnelle rgba () avec des décimales ou des pourcentages, par exemple rgba (255, 0, 0, 0,5) serait à 50% de rouge transparent. Les canaux RVB sont 0-255 ou 0% -100%, alpha est 0-1.

En CSS 4 *, vous pouvez spécifier le canal alpha en utilisant les 7e et 8e caractères d'une couleur hexadécimale à 8 chiffres, ou le 4e caractère d'une couleur hexadécimale à 4 chiffres (voir la spécification CSS niveau 4 *)

En mai 2019, on peut s'attendre à ce que plus de 80% des utilisateurs comprennent le format #RGBA

  • Firefox prend en charge cette syntaxe depuis Firefox 49 ( bogue Mozilla 567283 ).
  • Safari prend en charge cette syntaxe depuis Safari 10.
  • Chrome prend en charge cette syntaxe depuis Chrome 62. Pour les versions antérieures, vous pouvez activer les fonctionnalités Web expérimentales pour utiliser cette syntaxe. Voir problème Chromium 618472 et le bogue Webkit 150853 .
  • Les applications Android qui ciblent Android P ou plus récent peuvent utiliser cette syntaxe
  • Opera prend en charge cette syntaxe dans Opera 52 (ou Opera 39 lorsque les fonctionnalités Web expérimentales sont activées).
  • IE 11 et EdgeHTML 18 (Edge 44) ne prennent pas en charge cette syntaxe. Les versions basées sur Chromium d'Edge prendront en charge cette syntaxe.

Les informations de support à jour du navigateur sont disponibles sur CanIUse.com

* Techniquement encore à l'état de brouillon, mais étant donné la prise en charge du navigateur, il est peu probable que cela soit changé.


2
À partir de maintenant, Mozilla (Firefox 49) semble prendre en charge #RRGGBBAA et #RGBA
Shiyaz

92

Il semble qu'il n'y ait pas de format hexadécimal alpha: http://www.w3.org/TR/css3-color/

Quoi qu'il en soit, si vous utilisez un préprocesseur CSS comme SASS, vous pouvez passer un hexadécimal à rgba: background:

rgba(#000, 0.5);

Et le préprocesseur convertit simplement le code hexadécimal en RVB automatiquement.


15

Je ne sais pas s'il existe une norme officielle-

RGBA est la représentation que j'ai vue pour Web Macromedia et d'autres utilisent ARVB

Je crois que RGBA est la représentation la plus courante.

Si cela aide, c'est de W3 pour CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (Patrick): citation du lien W3 ci-dessus

Contrairement aux valeurs RVB, il n'y a pas de notation hexadécimale pour une valeur RVBA


2
De plus, la fonction CSS pour spécifier les couleurs avec des alphas est rgba ()
Ambre

8
à partir du lien W3 que vous avez publié: contrairement aux valeurs RVB, il n'y a pas de notation hexadécimale pour une valeur RVBA.
Patrick Klug le

2
J'ai déjà vu # RGB, A. Bizarre.
Joshua

Pour les drawables Android, il semble que ce soit ARGB: developer.android.com/reference/android/graphics/drawable/...
Derek Kurth

10

Chrome 52+ prend en charge alpha hex:

background: #56ff0077;

Pour les navigateurs plus anciens, vous devrez utiliser:

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

3
Non, ce n'est pas le cas, sauf si vous activez des fonctionnalités Web expérimentales, car cela posait des problèmes sur Android. Voir ma réponse ci-dessus pour plus de détails sur le support du navigateur.
thelem

3

Vous pouvez essayer de mettre la couleur hexadécimale dans le sélecteur de couleurs de GIMP ou du magasin de photos pour obtenir la valeur RVB, puis en utilisant la valeur alpha. par exemple. le rouge est #FF0000ou rgb(255,0,0) si vous voulez du rouge avec une valeur alpha de 0,5 alors rgba(255,0,0,.5).

Peut-être pas exactement ce que vous vouliez mais, espérons-le, cela aide.


1
Cela a été rejeté, ce qui semble un peu dur. Cela ne répond pas à la question posée, mais la question ne dit pas pourquoi ils veulent savoir. S'ils veulent simplement utiliser une couleur RGBA dans CSS, cette réponse est correcte.
thelem
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.