Crea codice CSS per le proprietà rgb() e rgba()

Un semplice tool attraverso il quale creare la sintassi CSS per i colori RGB e RGBA da utilizzare all'interno dei vostri fogli di stile partendo da un comune codice esadecimale o dalla selezione diretta di un colore all'interno della palette.

 
0.50
.foo {
 background-color: rgb(255,255,255);
 background-color: rgba(255,255,255,0.5);
}
Pubblicità

I colori nei CSS

Nei fogli di stile CSS, è possibile definire il colore degli elementi utilizzando diverse sintassi, ciascuna con le sue peculiarità:

  • Parole chiave (es. red, black, white, ecc.);
  • Notazione esadecimale (es. #ff0000);
  • Notazione RGB numerica o percentuale.

La notazione RGB nei CSS

Il modello RGB (Red, Green, Blue) è basato sulla combinazione dei tre colori primari additivi: rosso, verde e blu. Ogni colore è generato dalla loro miscela, variando l’intensità di ciascun canale.

I valori RGB possono essere espressi in due modi:

In percentuale:

body { background-color: rgb(100%, 100%, 100%) }

Oppure in formato numerico, su una scala da 0 a 255:

body { background-color: rgb(255, 255, 255) }

Entrambi gli esempi producono lo stesso risultato: uno sfondo bianco. Il bianco è infatti ottenuto combinando i tre canali alla loro massima intensità, mentre il nero corrisponde a intensità zero su tutti e tre i canali.

CSS3 e la notazione RGBa

Con l’introduzione di CSS3, è stato introdotto il supporto alla notazione RGBa, che consente di definire anche il livello di trasparenza (canale Alpha) oltre al colore.

La sintassi rgba() prevede quindi quattro parametri: quantità di rosso, verde, blu e trasparenza (alpha).

Il valore alpha varia da 0.0 (completamente trasparente) a 1.0 (completamente opaco). Ad esempio, per ottenere un bianco semi-trasparente al 50%:

div.box { background-color: rgba(255, 255, 255, 0.5) }
Per garantire compatibilità anche con browser più datati (che non supportano CSS3), è buona norma usare sia la proprietà rgb() che rgba(): in questo modo rgb() fungerà da fallback.

Genera automaticamente il valore RGB e RGBa

Con il tool disponibile in questa pagina puoi generare facilmente il codice CSS corrispondente alle proprietà rgb() e rgba().

Per utilizzare lo strumento, segui questi semplici passaggi:

  1. Definisci il colore: puoi inserirne il valore esadecimale oppure selezionarlo tramite il selettore dei colori integrato.
  2. Imposta l’intensità dell’opacità: utilizza lo slider per scegliere un valore da 0 (massima trasparenza) a 100 (completa opacità). Questo valore influirà solo sulla generazione del codice rgba().
  3. Clicca sul bottone: una volta configurato colore e opacità, premi il pulsante per generare il codice da copiare nel tuo foglio di stile.

Ricorda che la proprietà rgba() è compatibile solo con i browser che supportano CSS3. In caso contrario, verrà applicata soltanto la versione rgb() eventualmente indicata come fallback.