Fonction rgb() en CSS

Définition et utilisation

Dans CSS rgb() La fonction utilise le modèle de couleur rouge-vert-bleu (RGB) pour spécifier la couleur. Il est également possible d'ajouter un canal de transparence optionnel (représentant la transparence de la couleur).

La valeur de couleur RGB est définie par rgb(rouge vert bleu) Spécifier. Chaque paramètre définit l'intensité de la couleur, qui peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Par exemple, la valeur rgb(0 0 255) est affichée en bleu, car le paramètre bleu est réglé sur la valeur maximale (255), tandis que les autres paramètres sont réglés sur 0.

Attention :rgba() La fonction est rgb() Alias de la fonction. Il est recommandé d'utiliser rgb() Fonction.

Exemple

Définir différentes couleurs RGB(A) :

#p1 {background-color:rgb(255 0 0);} /* Rouge */
#p2 {background-color:rgb(0 255 0);} /* Vert */
#p3 {background-color:rgb(0 0 255);} /* Bleu */
#p4 {background-color:rgb(192 192 192);} /* Gris */
#p5 {background-color:rgb(255 255 0);} /* Jaune */
#p6 {background-color:rgb(255 0 255);} /* Rouge cerise */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* Rouge cerise avec transparence */
#p8 {background-color:rgb(0 0 255 / 50%);} /* Bleu avec transparence */

Essayez-le vous-même

Syntaxe CSS

Syntaxe des valeurs absolues

rgb(R G B / A)
Valeur Description
R

Obligatoire. Définit l'intensité de la couleur rouge, peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Vous pouvez également utiliser none (équivalent à 0%).
G

Obligatoire. Définit l'intensité de la couleur verte, peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Vous pouvez également utiliser none (équivalent à 0%).
B

Obligatoire. Définit l'intensité de la couleur bleue, peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Vous pouvez également utiliser none (équivalent à 0%).
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur, 0% (ou 0) signifie complètement transparent, 100% (ou 1) signifie完全不透明.

Vous pouvez également utiliser none (représentant une transparence nulle). La valeur par défaut est de 100%.

Syntaxe des valeurs relatives

rgb(from color R G B / A)
Valeur Description
from color

Commence par le mot-clé from, suivi de la valeur de la couleur originale.

C'est la couleur originale sur laquelle se fonde la couleur relative.
R

Obligatoire. Définit l'intensité de la couleur rouge, peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Vous pouvez également utiliser none (équivalent à 0%).
G

Obligatoire. Définit l'intensité de la couleur verte, peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Vous pouvez également utiliser none (équivalent à 0%).
B

Obligatoire. Définit l'intensité de la couleur bleue, peut être un entier entre 0 et 255 ou un pourcentage entre 0% et 100%.

Vous pouvez également utiliser none (équivalent à 0%).
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur, 0% (ou 0) signifie complètement transparent, 100% (ou 1) signifie完全不透明.

Vous pouvez également utiliser none (représentant une transparence nulle). La valeur par défaut est de 100%.

Détails techniques

Version : CSS2

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
rgb() avec paramètre de transparence
65 79 52 12.1 52
Paramètres séparés par des espaces
65 79 52 12.1 52