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%;

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

¡El Módulo de color CSS Nivel 4 probablemente admitirá la notación hexadecimal RGBA de 4 y 8 dígitos!

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

Nota: la siguiente cita tiene fragmentos irrelevantes recortados y la fuente puede haber sido muy modificada en el momento de leer esto (como se mencionó anteriormente, es un borrador del editor y no un documento finalizado).
Si las cosas han cambiado mucho, ¡deje un comentario para informarme para que pueda actualizar esta respuesta!

§ 4.2. Las notaciones hexadecimales RGB: #RRGGBB

La sintaxis de a <hex-color>es un <hash-token>token cuyo valor consta de 3, 4, 6 u 8 dígitos hexadecimales . En otras palabras, un color hexadecimal se escribe como un carácter hash, "#", seguido de cierto número de dígitos 0-9o letras a-f(el caso de las letras no importa, #00ff00es 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 00representa un color totalmente transparente y ffrepresenta un color totalmente opaco.

Ejemplo 3
En otras palabras, #0000ffccrepresenta 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 0representa el valor mínimo y frepresenta 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 navegadores que admiten el Color Módulo de sintaxis de 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?

Dejando a un lado todas las bromas: actualmente es solo el comienzo de 2015, por lo que todavía no serán compatibles con ningún navegador durante bastante tiempo, incluso si su producto solo está diseñado para funcionar en los navegadores más actualizados, probablemente No veré esto en acción en un navegador de producción en el corto plazo.

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

Sin embargo, dicho esto, la forma en que funciona CSS significa que podemos comenzar a usarlos hoy. Si realmente desea comenzar a usarlos en este momento, siempre que agregue una reserva, los navegadores que no sean compatibles simplemente ignorarán 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 */
}

<figure>Hello, world!</figure>

Mientras esté viendo esta respuesta en un navegador que admita las propiedades backgroundy coloren CSS, el <figure>elemento resultante del fragmento anterior se verá muy similar a esto:

Usando la versión más reciente de Chrome en Windows (v39.0.2171) para inspeccionar nuestro <figure>elemento, veremos lo siguiente:

Los rgba()valores anulan el retroceso hexadecimal de 6 dígitos , y nuestros valores hexadecimales de 8 dígitos se ignoran ya que el analizador CSS de Chrome los considera actualmente inválidos. Tan pronto como nuestro navegador admita estos valores de 8 dígitos, estos anularán los valores rgba().

ACTUALIZACIÓN 2018-07-04: Firefox, Chrome y Safari son compatibles con esta notación ahora, Edge todavía falta pero probablemente seguirá ( https://caniuse.com/#feat=css-rrggbbaa ).

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

MS Excel ayudó!

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

(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

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+')';

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

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

Chrome 52+ es compatible con alpha hex:

background: #56ff0077;

Uso red, green, bluepara convertir a RGBA:

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

Me temo que eso no es posible. el rgbaformato que conoces es el único.

Si puede usar MENOS, hay una función de desvanecimiento.

@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 alfa. 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 color pueden ser colores hexadecimales (# FFAAD3) o colores hexadecimales argb (# 88FFAAD3).

En Sass podemos escribir:

background-color: rgba(#ff0000, 0.5);

como se sugirió en la representación hexadecimal de un color con canal alfa?

Bueno, diferentes anotaciones de color es lo que tendrás que aprender.
Kuler te da una mejor oportunidad de encontrar color y en múltiples anotaciones.
Hex no es diferente de RGB, FF = 255 y 00 = 0, pero eso es lo que sabes. Entonces, en cierto modo, tienes que visualizarlo.
Yo uso Hex, RGBA y RGB. A menos que se requiera una conversión en masa, hacerlo manualmente lo ayudará a recordar unos 100 colores extraños y sus códigos.
Para la conversión en masa, escriba un guión como el proporcionado por Alarie. Diviértete con los colores.

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

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