So che puoi scrivere ...

background-color: #ff0000;

... se vuoi qualcosa di rosso.

E puoi scrivere ...

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

... se vuoi qualcosa di rosso e traslucido.

Esiste un modo conciso di scrivere colori parzialmente trasparenti in esadecimali? Voglio qualcosa del tipo:

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

... o ...

background-color: #ff0000 50%;

Sto ottenendo tutti i miei colori in esadecimali e doverli convertire tutti nella scala decimale 0-255 è fastidioso.

Il CSS Color Module Level 4 probabilmente supporterà la notazione esadecimale RGBA a 4 e 8 cifre!

Tre settimane fa (18 dicembre 2014) la bozza dell'editor CSS Color Module Level 4 è stata presentata al gruppo di lavoro CSS W3C. Anche se in uno stato che è fortemente suscettibile di cambiamento, la versione corrente del documento implica che in qualche modo futuro CSS vicino sosterrà sia la notazione esadecimale RGBA 4 e 8 cifre.

Nota: la seguente citazione ha ritagli di pezzi irrilevanti e la fonte potrebbe essere stata fortemente modificata al momento della lettura (come menzionato sopra, è una bozza dell'editor e non un documento finalizzato).
Se le cose sono cambiate notevolmente, ti preghiamo di lasciare un commento che mi faccia sapere per poter aggiornare questa risposta!

§ 4.2 Notazioni esadecimali RGB: #RRGGBB

La sintassi di a <hex-color>è un <hash-token>token il cui valore è composto da 3, 4, 6 o 8 cifre esadecimali . In altre parole, un colore esadecimale viene scritto come un carattere hash, "#", seguito da un numero di cifre 0-9o lettere a-f(il caso delle lettere non ha importanza - #00ff00è identico a #00FF00).

8 cifre

Le prime 6 cifre sono interpretate in modo identico alla notazione a 6 cifre. L'ultima coppia di cifre, interpretata come un numero esadecimale, specifica il canale alfa del colore, dove 00rappresenta un colore completamente trasparente e ffrappresenta un colore completamente opaco.

Esempio 3
In altre parole, #0000ffccrappresenta lo stesso colore di rgba(0, 0, 100%, 80%)(un blu leggermente trasparente).

4 cifre

Questa è una variante più breve della notazione a 8 cifre, "espansa" allo stesso modo della notazione a 3 cifre. La prima cifra, interpretata come un numero esadecimale, specifica il canale rosso del colore, dove 0rappresenta il valore minimo e frappresenta il massimo. Le tre cifre successive rappresentano rispettivamente i canali verde, blu e alfa.

Cosa significa questo per il futuro dei colori CSS?

Ciò significa che supponendo che questo non sia completamente rimosso dal documento di Livello 4, saremo presto in grado di definire i nostri colori RGBA (o colori HSLA, se sei uno di quei ragazzi) in formato esadecimale nei browser che supportano il Colore Sintassi del Livello 4 del modulo.

Esempio

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. */
}

Quando potrò utilizzarlo nei miei prodotti rivolti al cliente?

Tutte le battute a parte: attualmente è solo l'inizio del 2015, quindi questi non saranno supportati in nessun browser ancora per un po 'di tempo - anche se il tuo prodotto è progettato per funzionare solo con i browser più aggiornati probabilmente non vederlo presto in azione in un browser di produzione.

Visualizza il supporto del browser corrente per la notazione di colore #RRGGBBAA

Tuttavia, detto ciò, il modo in cui funziona CSS significa che possiamo effettivamente iniziare a usarli oggi! Se vuoi davvero iniziare a usarli in questo momento, se aggiungi un fallback qualsiasi browser non supportante semplicemente ignorerà le nuove proprietà fino a quando non saranno ritenute valide:

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>

Finché visualizzi questa risposta su un browser che supporta le proprietà backgrounde colornei CSS, l' <figure>elemento nel risultato dello snippet sopra sarà molto simile a questo:

Utilizzando la versione più recente di Chrome su Windows (v39.0.2171) per ispezionare il nostro <figure>elemento, vedremo quanto segue:

Il fallback esadecimale a 6 cifre viene sovrascritto dai rgba()valori e i nostri valori esadecimali a 8 cifre vengono ignorati in quanto attualmente considerati non validi dal parser CSS di Chrome. Non appena il nostro browser supporta questi valori a 8 cifre, questi sostituiranno rgba()quelli.

AGGIORNAMENTO 2018-07-04: Firefox, Chrome e Safari supportano questa notazione ora, Edge manca ancora ma probabilmente seguirà ( https://caniuse.com/#feat=css-rrggbbaa ).

Ho trovato la risposta dopo aver pubblicato il miglioramento alla domanda. Scusa!

MS Excel ha aiutato!

aggiungi semplicemente il prefisso esadecimale al valore del colore esadecimale per aggiungere un alfa che ha l'opacità equivalente come valore%.

(in rbga l'opacità percentuale è espressa come decimale come sopra indicato)

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

Vedi qui http://www.w3.org/TR/css3-color/#rgba-color

Non è possibile, molto probabilmente perché 0xFFFFFFFF è maggiore del valore massimo per numeri interi a 32 bit

Chrome 52+ supporta l' alfa esadecimale:

background: #56ff0077;

Utilizzare red, green, blueda convertire in RGBA:

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

Temo che non sia possibile. il rgbaformato che conosci è l'unico.

Se puoi usare MENO, c'è una funzione di dissolvenza.

@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 affascinante:

Solo Internet Explorer consente il colore esadecimale a 4 byte nel formato ARGB, dove A è il canale alfa. Può essere utilizzato nei filtri gradiente, ad esempio:

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

Dove dir può essere: 1 (orizzontale) o 0 (verticale) E le stringhe di colore possono essere esadecimali (# FFAAD3) o argb esadecimali (# 88FFAAD3).

A Sass possiamo scrivere:

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

come è stato suggerito nella rappresentazione esadecimale di un colore con canale alfa?

Bene, è necessario imparare diverse notazioni di colore.
Kuler ti dà una migliore possibilità di trovare il colore e in più notazioni.
L'esagono non è diverso da RGB, FF = 255 e 00 = 0, ma questo è quello che sai. Quindi, in un certo senso, devi visualizzarlo.
Uso Hex, RGBA e RGB. A meno che non sia richiesta la conversione di massa, farlo manualmente ti aiuterà a ricordare alcuni strani 100 colori e i loro codici.
Per la conversione di massa scrivi qualche sceneggiatura come quella data da Alarie. Divertiti con i colori.

perché non usare background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

se scegli come target un colore per un testo o probabilmente un elemento, questo dovrebbe essere molto più facile da fare.