Menu

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
 
 
I colori nei CSS
 
Da sempre, nei fogli di stile CSS, è possibile definire i colori degli elementi da stilizzare attraverso l'utilizzo di:
  • parole chiave (ad es. red, black, white,...)
  • notazione colore esadecimale
  • notazione colore RGB
La notazione RGB nei CSS
 
RGB è un modello di definizione del colore basato sui colori primari addittivi, cioè sulla mescolanza dei tre colori rosso (Red), verde (Green) e blu (Blue).
 
Nel modello RGB i valori possono essere espressi sotto forma di percentuale:
 
body { background-color: rgb(100%, 100%, 100%) }
 
Oppure utilizzando una scala numerica che va da 0 a 255:
 
body { background-color: rgb(255, 255, 255) }
 
Si noti che i due esempi sopra riportati sono equivalenti, nel senso che con entrambi gli stili l'elemeto body sarà stilizzato con uno sfondo di colore bianco (il bianco, infatti, è dato dall'unione dei tre colori alla loro massima intensità, veceversa il nero corrisponde ad intensità zero per i tre colori).
 
CSS3 e la notazione RGBa
 
Con l'avvento di CSS3 è possibile definire il colore di un elemento mediante la notazione RGBa, cioè specificando non solo il colore ma anche il livello del cosidetto canale Alpha.
 
Con la notazione RGBa, pertanto, è necessario specificare la quantità di rosso, di verde, di blu ed il livello di trasparenza (alpha).
 
Il livello di trasparenza si imposta assegnando ad alpha un valore compreso tra 0.0 (invisibile o, più correttamente, trasparente) e 1.0 (completamente visibile o, più correttamente, opaco).
 
Supponendo di voler creare un elemento bianco semi-trasparente (trasparenza del 50%) useremo la seguente sintassi:
 
div.box { background-color: rgba(255, 255, 255, 0.5) }
Al fine di garantire un risultato accettabile anche su browser datati (privi, cioè, del supporto a CSS3) è opportuno utilizzare sempre la proprietà rgba() insieme a rgb() in modo tale che quest'ultima funga da fallback.
 
Genera automaticamente il valore RGB e RGBa
 
Attraverso il tool presente in questa pagina è possibile generare il codice CSS per le proprietà rgb() e rgba().
 
Per utilizzare il tool di generazione automatica seguire questi step:
 
  1. Definire il colore: è possibile definire il colore indicandone il valore esadecimale o selezionando la tonalità desiderata dal selettore dei colori che si apre cliccando sul campo input:
 selezione colore tramite color picker 
  1. Impostare l'intesità dell'opacità: l'opacità può essere difinita utilizzando l'apposito slider all'interno di un range cha va da 0 (massima trasparenza) a 100 (massima opacità). Si noti che la selezione del livello di opacità influirà unicamente sul valore della proprietà rgba().
  2. cliccare sul bottone: una volta impostato colore e opacità cliccare sul bottone per generare il codice CSS da copiare sul proprio sito.
 
Si noti che, come detto, la proprietà rgba() fa parte della sintassi di CSS3 e pertanto, per funzionare correttamente, è necessario che il browser dell'utente ne abbia integrato il supporto.
 
Altri tool interessanti