Funzione rgb() di CSS

Definizione e utilizzo

CSS rgb() La funzione utilizza il modello di colore rosso-verde-blu (RGB) per specificare il colore. È anche possibile aggiungere un canale di trasparenza opzionale (che rappresenta la trasparenza del colore).

Il valore del colore RGB viene specificato tramite rgb(rosso verde blu) Specificazione. Ogni parametro definisce l'intensità del colore, può essere un intero compreso tra 0 e 255 o una percentuale compresa tra 0% e 100%.

Ad esempio, il valore rgb(0 0 255) viene rappresentato come blu, perché il parametro blu è impostato al valore massimo (255), mentre gli altri parametri sono impostati a 0.

Attenzione:rgba() La funzione è rgb() Alias della funzione. Si consiglia di usare rgb() Funzione.

Esempio

Definisci diversi colori RGB(A):

#p1 {background-color:rgb(255 0 0);} /* Rosso */
#p2 {background-color:rgb(0 255 0);} /* Verde */
#p3 {background-color:rgb(0 0 255);} /* Blu */
#p4 {background-color:rgb(192 192 192);} /* Grigio */
#p5 {background-color:rgb(255 255 0);} /* Giallo */
#p6 {background-color:rgb(255 0 255);} /* Rosso ciliegia */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* Rosso ciliegia con trasparenza */
#p8 {background-color:rgb(0 0 255 / 50%);} /* Blu con trasparenza */

Prova te stesso

Sintassi CSS

Sintassi assoluta

rgb(R G B / A)
Valore Descrizione
R

Obbligatorio. Definisce l'intensità del rosso, può essere un intero tra 0 e 255 o una percentuale tra 0% e 100%.

Puoi anche usare none (equivalente a 0%).
G

Obbligatorio. Definisce l'intensità del verde, può essere un intero tra 0 e 255 o una percentuale tra 0% e 100%.

Puoi anche usare none (equivalente a 0%).
B

Obbligatorio. Definisce l'intensità del blu, può essere un intero tra 0 e 255 o una percentuale tra 0% e 100%.

Puoi anche usare none (equivalente a 0%).
/ A

Opzionale. Rappresenta il valore del canale di trasparenza del colore, 0% (o 0) rappresenta completa trasparenza, 100% (o 1) rappresenta completa opacità.

Puoi anche usare none (che rappresenta un canale di trasparenza inesistente). Il valore predefinito è 100%.

Sintassi dei valori relativi

rgb(from color R G B / A)
Valore Descrizione
from color

Inizia con il termine from, seguito dal valore del colore originale.

Questo è il colore originale su cui si basano i colori relativi.
R

Obbligatorio. Definisce l'intensità del rosso, può essere un intero tra 0 e 255 o una percentuale tra 0% e 100%.

Puoi anche usare none (equivalente a 0%).
G

Obbligatorio. Definisce l'intensità del verde, può essere un intero tra 0 e 255 o una percentuale tra 0% e 100%.

Puoi anche usare none (equivalente a 0%).
B

Obbligatorio. Definisce l'intensità del blu, può essere un intero tra 0 e 255 o una percentuale tra 0% e 100%.

Puoi anche usare none (equivalente a 0%).
/ A

Opzionale. Rappresenta il valore del canale di trasparenza del colore, 0% (o 0) rappresenta completa trasparenza, 100% (o 1) rappresenta completa opacità.

Puoi anche usare none (che rappresenta un canale di trasparenza inesistente). Il valore predefinito è 100%.

Dettagli tecnici

Versione: CSS2

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
rgb() con parametro di trasparenza
65 79 52 12.1 52
Parametri separati da spazi
65 79 52 12.1 52