¿Representación hexadecimal de un color con canal alfa?


117

¿Existe un W3 o cualquier otro estándar digno de mención sobre cómo representar un color (incluido el canal alfa) en formato hexadecimal?

¿Es #RGBA o #ARGB?


8
Viene en fuente CSS Color Nivel 4 (ver el cuarto punto)
Šime Vidas

@ ŠimeVidas si hubieras puesto eso en una respuesta, te habría votado a favor.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

@cirosantilli ¿Parece que necesito el representante? :-P
Šime Vidas

1
@ ŠimeVidas lol, si quieres compartir algo entonces ... =)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Hay una pregunta similar específica de CSS sobre esto aquí: ¿ CSS RGBA hexadecimal?
James Donnelly

Respuestas:


82

En CSS 3, para citar la especificación, "no hay notación hexadecimal para un valor RGBA" (consulte la especificación CSS Nivel 3 ). En su lugar, puede usar la notación funcional rgba () con decimales o porcentajes, por ejemplo, rgba (255, 0, 0, 0.5) sería 50% rojo transparente. Los canales RGB son 0-255 o 0% -100%, alfa es 0-1.

En CSS 4 *, puede especificar el canal alfa usando el séptimo y octavo carácter de un color hexadecimal de 8 dígitos, o el cuarto carácter de un color hexadecimal de 4 dígitos (consulte la especificación CSS Nivel 4 *)

A partir de mayo de 2019, se puede esperar que> 80% de los usuarios comprendan el formato #RGBA

  • Firefox ha admitido esta sintaxis desde Firefox 49 ( error de Mozilla 567283 ).
  • Safari ha admitido esta sintaxis desde Safari 10.
  • Chrome ha admitido esta sintaxis desde Chrome 62. Para versiones anteriores, puede habilitar funciones web experimentales para usar esta sintaxis. Consulte Chromium Issue 618472 y Webkit bug 150853 .
  • Las aplicaciones de Android que tienen como destino Android P o versiones posteriores pueden usar esta sintaxis
  • Opera admite esta sintaxis en Opera 52 (u Opera 39 cuando las funciones web experimentales están habilitadas).
  • IE 11 y EdgeHTML 18 (Edge 44) no admiten esta sintaxis. Las versiones de Edge basadas en Chromium admitirán esta sintaxis.

La información de soporte del navegador actualizada está disponible en CanIUse.com

* Técnicamente todavía en borrador, pero dada la compatibilidad del navegador, es poco probable que se cambie.


2
A partir de ahora, Mozilla (Firefox 49) parece ser compatible con #RRGGBBAA y #RGBA
Shiyaz

92

Parece que no hay un formato alfa hexadecimal: http://www.w3.org/TR/css3-color/

De todos modos, si usa un preprocesador CSS como SASS, puede pasar un hexadecimal a rgba: background:

rgba(#000, 0.5);

Y el preprocesador simplemente convierte el código hexadecimal a rgb automáticamente.


15

No estoy seguro de si existe un estándar oficial

RGBA es la representación que he visto para Web Macromedia y otros usan ARGB

Creo que RGBA es la representación más común.

Si ayuda, esto es de W3 para CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDITAR (Patrick): cita del enlace W3 anterior

A diferencia de los valores RGB, no existe una notación hexadecimal para un valor RGBA


2
Además, la función CSS para especificar colores con alfa es rgba ()
Amber

8
del enlace W3 que publicó: A diferencia de los valores RGB, no hay una notación hexadecimal para un valor RGBA.
Patrick Klug

2
He visto # RGB, A antes. Extraño.
Joshua

Para los elementos de diseño de Android, parece ser ARGB: developer.android.com/reference/android/graphics/drawable/…
Derek Kurth

10

Chrome 52+ admite alfa hexadecimal:

background: #56ff0077;

Para navegadores más antiguos, deberá utilizar:

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

3
No, no lo hace, a menos que habilite las funciones web experimentales, porque estaba causando problemas en Android. Consulte mi respuesta anterior para obtener detalles sobre la compatibilidad con el navegador.
thelem

3

Puede intentar poner el color hexadecimal en el selector de color de GIMP o en la tienda de fotografía para obtener el valor RGB y luego usar el valor alfa. p.ej. rojo es #FF0000o rgb(255,0,0) si quieres rojo con un valor alfa de .5, entonces rgba(255,0,0,.5).

Tal vez no sea exactamente lo que querías, pero espero que ayude.


1
Esto fue rechazado, lo que parece un poco duro. No responde la pregunta formulada, pero la pregunta no dice por qué quieren saber. Si solo quieren usar un color RGBA en CSS, entonces esta respuesta es correcta.
thelem
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.