Aggiungi trasparenza a qualsiasi colore hex. Scegli un'opacità, copia il valore hex a 8 cifre, rgba, hsla o Android e vedilo su sfondi chiari, scuri e a scacchi. Tabella alpha completa da 0 a 100%.
Per rendere trasparente un colore hex, aggiungi altre due cifre hex per l'alpha: #RRGGBBAA. La coppia è l'opacità moltiplicata per 255, scritta in hex, quindi 50% è 80, 75% è BF e 25% è 40. Scegli un colore e un'opacità qui sotto per ottenere il valore hex a 8 cifre più i corrispondenti valori rgba e hsla.
Valori di opacità più usati
Opacità
Coppia alpha
Esempio su #4F98FB
BF
Scegli un colore, trascina lo slider dell'opacità e copia il formato che serve al tuo codice. L'anteprima mostra il colore sopra il bianco, il nero e uno sfondo a scacchi, insieme al colore pieno che ne risulta su ciascuno.
Digita o scegli un colore di base. Funzionano hex a tre, sei e otto cifre; una coppia alpha già presente imposta lo slider.
Trascina lo slider o digita una percentuale da 0 a 100.
Copia l'hex a 8 cifre, rgba(), il moderno rgb() con la barra, hsla() o la forma Android #AARRGGBB.
Controlla il colore risultante sul bianco e sul nero se ti serve un fallback pieno o vuoi testare il contrasto del testo.
Le coppie alpha sono arrotondate, quindi una percentuale non torna sempre identica. 80 in hex è 128 su 255, cioè 50.2%, abbastanza vicino per qualsiasi schermo.
Le risorse colore Android mettono l'alpha per prima (#AARRGGBB), l'opposto del CSS. Invertirle è un motivo comune per cui un colore appare sbagliato in un'app.
Per il testo, controlla il contrasto rispetto al colore risultante, non a quello trasparente. Un nero al 60% sul bianco si legge in modo molto diverso da un nero al 60% su una foto.
Usa la proprietà opacity solo quando l'intero elemento, figli compresi, deve sbiadire. Per uno sfondo trasparente con testo pieno, metti invece l'alpha nel colore di sfondo.
Domande frequenti
Tutti i browser supportano i colori hex a 8 cifre?
Sì. Le forme #RRGGBBAA e #RGBA vengono da CSS Color Level 4 e funzionano in ogni versione attuale di Chrome, Edge, Firefox e Safari. I browser molto vecchi le ignorano, quindi aggiungi un fallback rgba() solo se li supporti ancora.
Come converto l'opacità in hex?
Moltiplica l'opacità (da 0 a 1) per 255, arrotonda a un numero intero e scrivilo come due cifre hex. Per il 30%: 0.3 per 255 fa 76.5, che si arrotonda a 77, cioè 4D in hex. La tabella completa in questa pagina elenca ogni passo del 5%.
#RRGGBBAA è uguale a rgba()?
Descrivono lo stesso colore. rgba(79, 152, 251, 0.5) e #4F98FB80 vengono visualizzati in modo identico, a parte il minimo arrotondamento dell'alpha hex. Scegli quello che la tua codebase usa già.
E l'hex a 4 cifre?
Leggere la coppia alpha
Una coppia hex conta da 00 a FF, cioè da 0 a 255. La coppia alpha usa la stessa scala, dove 00 è completamente trasparente e FF è completamente opaco. Ecco perché i valori comuni sembrano strani all'inizio: metà di 255 è 127.5, quindi il 50% si arrotonda a 128, che è 80 in hex.
I designer spesso esportano i colori da un file di design con un numero di opacità separato. Trasformarlo in un unico valore a 8 cifre rende facile inserirlo in un design token o in una configurazione Tailwind.
Colori trasparenti in Tailwind
Tailwind aggiunge l'opacità con una barra dopo il nome del colore, per esempio bg-sky-500/50, che funziona per qualsiasi colore del tema. Per un colore personalizzato, un valore arbitrario come bg-[#4F98FB80] accetta direttamente l'hex a 8 cifre.
Dietro le quinte, Tailwind 4 mescola il colore con transparent usando color-mix(), mentre le versioni precedenti usano rgb() con un alpha. Il risultato sullo schermo è lo stesso del valore hex che ti dà questo strumento.