CSS hexadecimal RGBA?

Sé que puedes escribir …

background-color: #ff0000; 

… si quieres algo que sea rojo.

Y puedes escribir …

 background-color: rgba(255, 0, 0, 0.5); 

… si quieres algo rojo y translúcido.

¿Hay alguna forma concisa de escribir colores parcialmente transparentes en hexadecimal? Quiero algo como:

 background-color: #ff000088; <--- the 88 is the alpha 

… o …

 background-color: #ff0000 50%; 

Obtengo todos mis colores en hexadecimal, y tener que convertirlos todos a la escala decimal 0-255 es molesto.

El CSS Color Module Level 4 probablemente admitirá notación RGBA hexadecimal de 4 y 8 dígitos.

Hace tres semanas (18 de diciembre de 2014) el borrador del editor de CSS Color Module Level 4 se envió al Grupo de trabajo de CSS W3C. Aunque en un estado que es muy susceptible al cambio, la versión actual del documento implica que en un futuro próximo, CSS admitirá la notación RGBA hexadecimal de 4 y 8 dígitos.

Nota: la siguiente cita tiene fragmentos irrelevantes recortados y la fuente puede haber sido modificada en gran medida en el momento de leer esto (como se mencionó anteriormente, es un borrador del editor y no un documento final).
Si las cosas han cambiado mucho, por favor deje un comentario haciéndome saber para poder actualizar esta respuesta!

§ 4.2. Las notaciones hexadecimales RGB: #RRGGBB

La syntax de un es un cuyo valor consiste en 3, 4, 6 u 8 dígitos hexadecimales . En otras palabras, un color hexadecimal se escribe como un carácter hash, “#”, seguido de un número de dígitos 0-9 o letras af (el caso de las letras no importa – #00ff00 es idéntico a #00FF00 ).

8 dígitos

Los primeros 6 dígitos se interpretan de manera idéntica a la notación de 6 dígitos. El último par de dígitos, interpretado como un número hexadecimal, especifica el canal alfa del color, donde 00 representa un color completamente transparente y ff representa un color completamente opaco.

Ejemplo 3
En otras palabras, #0000ffcc representa el mismo color que rgba(0, 0, 100%, 80%) (un azul ligeramente transparente).

4 dígitos

Esta es una variante más corta de la notación de 8 dígitos, “expandida” de la misma manera que la notación de 3 dígitos. El primer dígito, interpretado como un número hexadecimal, especifica el canal rojo del color, donde 0 representa el valor mínimo y f representa el máximo. Los siguientes tres dígitos representan los canales verde, azul y alfa, respectivamente.

¿Qué significa esto para el futuro de los colores CSS?

Esto significa que suponiendo que esto no se elimine por completo del documento de Nivel 4, pronto podremos definir nuestros colores RGBA (o colores HSLA, si usted es uno de esos tipos) en formato hexadecimal en los navegadores que admiten el Color. Sintaxis del Módulo Nivel 4

Ejemplo

 elem { background: rgb(0, 0, 0); /* RGB notation (no alpha). */ background: #000; /* 3-digit hexadecimal notation (no alpha). */ background: #000000; /* 6-digit hexadecimal notation (no alpha). */ background: rgba(0, 0, 0, 1.0); /* RGBA notation. */ /* The new 4 and 8-digit hexadecimal notation. */ background: #0000; /* 4-digit hexadecimal notation. */ background: #00000000; /* 8-digit hexadecimal notation. */ } 

¿Cuándo podré usar esto en mis productos orientados al cliente?

Tumble weed es la única respuesta real ...

Todos los chistes a un lado: actualmente solo es a principios de 2015, por lo que no se admitirán en ningún navegador desde hace bastante tiempo; incluso si el producto está diseñado solo para funcionar en los navegadores más actualizados, probablemente no estar viendo esto en acción en un navegador de producción en el corto plazo.

Ver el soporte actual del navegador para la notación de color #RRGGBBAA

Sin embargo, dicho esto, la forma en que CSS funciona significa que ¡podemos comenzar a usarlos hoy! Si realmente desea comenzar a usarlos ahora mismo, siempre y cuando agregue una copia de seguridad, cualquier navegador no compatible simplemente ignorará las nuevas propiedades hasta que se consideren válidas:

 figure { margin: 0; padding: 4px; /* Fall back (...to browsers which don't support alpha transparency). */ background: #FEFE7F; color: #3F3FFE; /* Current 'modern' browser support. */ background: rgba(255, 255, 0, 0.5); color: rgba(0, 0, 255, 0.75); /* Fall... foward? */ background: #ffff007F; /* Or, less accurately, #ff08 */ color: #0000ffbe; /* Or #00fc */ } 
 
Hello, world!
 RGB='#ffabcd'; A='0.5'; RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')'; 

Vea aquí http://www.w3.org/TR/css3-color/#rgba-color

No es posible, muy probablemente porque 0xFFFFFFFF es mayor que el valor máximo para enteros de 32 bits

Chrome 52+ es compatible con alfa hex:

 background: #56ff0077; 

Encontré la respuesta después de publicar la mejora de la pregunta. ¡Lo siento!

¡MS Excel ayudó!

simplemente agregue el prefijo hexadecimal al valor de color hexadecimal para agregar un alfa que tenga la opacidad equivalente como el valor%.

(en rbga, el porcentaje de opacidad se expresa como un decimal como se mencionó anteriormente)

 Opacity % 255 Step 2 digit HEX prefix 0% 0.00 00 5% 12.75 0C 10% 25.50 19 15% 38.25 26 20% 51.00 33 25% 63.75 3F 30% 76.50 4C 35% 89.25 59 40% 102.00 66 45% 114.75 72 50% 127.50 7F 55% 140.25 8C 60% 153.00 99 65% 165.75 A5 70% 178.50 B2 75% 191.25 BF 80% 204.00 CC 85% 216.75 D8 90% 229.50 E5 95% 242.25 F2 100% 255.00 FF 

Me temo que eso no es posible. el formato rgba que sabes es el único.

Si puede usar LESS, hay una función de fundido.

 @my-opaque-color: #a438ab; @my-semitransparent-color: fade(@my-opaque-color, 50%); background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); // result: background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5)); 

Principe azul:

Solo Internet Explorer permite el color hexadecimal de 4 bytes en el formato de ARGB, donde A es el canal Alpha. Se puede usar en filtros de gradiente, por ejemplo:

 filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})"; 

Donde dir puede ser: 1 (horizontal) o 0 (vertical) Y las cadenas de colores pueden ser colores hexadecimales (# FFAAD3) o colores hexadecimales argb (# 88FFAAD3).

Bueno, diferentes notaciones de color es lo que tendrás que aprender.
Kuler te da una mejor oportunidad de encontrar el color y en múltiples anotaciones.
Hex no es diferente de RGB, FF = 255 y 00 = 0, pero eso es lo que sabes. Entonces, de alguna manera, debes visualizarlo.
Yo uso Hex, RGBA y RGB. A menos que se requiera la conversión masiva, hacer esto manualmente le ayudará a recordar algunos colores impares y sus códigos.
Para la conversión masiva escriba alguna secuencia de comandos como la dada por Alarie. Diviértete con Colors.

Use red , green , blue para convertir a RGBA:

 background-color: rgba(red($color), green($color), blue($color), 0.2); 

¿por qué no utilizar background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */ background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

si apuntas a un color para un texto o probablemente un elemento, esto debería ser mucho más fácil de hacer.