Les fonctions CSS rgb() et rgba()

Schéma syntaxique de rgb().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• r, g et b sont les valeurs de rouge,de vert et de bleu. Des nombres sans unité compris entre 0 et 255, ou des pourcentages.
• alpha est la valeur de l'opacité (canal alpha). Un nombre sans unité compris entre 0 et 1, ou un pourcentage.
• color est une couleur de référence, décrite dans l'une des syntaxes de CSS : voir Les couleurs.

Description des fonctions rgb() et rgba().

La fonction rgb() définit une couleur à partir des trois composantes de base qui sont le rouge, le vert et et le bleu, soit Red, Green, Blue en anglais.

La fonction rgba() définit une couleur et son opacité à partir des trois couleurs de base (rouge, vert et bleu) et du paramètre alpha. Ce dernier définit l'opacité de la couleur, c'est à dire la possibilité de voir à travers ou non.

Il y a deux syntaxes pour ces fonctions. L'ancienne syntaxe, conservée pour des taisons de compatibilité, dans laquelle les paramètres sont séparés par une virgule, et la nouvelle, avec des paramètres séparés par un espace. D'autre part, la fonction rgb() accepte maintenant l'opacité : la fonction rgba() devient donc inutile.

rgb() et rgba() peuvent être utilisées avec toutes les propriétés qui attendent une couleur. Exemples :

Pour rappel, la synthèse RVB, ou synthèse additive des couleurs, est utilisée par tous les appareils électroniques ou informatique : télévision, écran, appareils photo, etc. Cette synthèse repose sur le mélange de trois couleurs de base, qui sont le rouge, le vert et le bleu. En dosant la proportions de chacune de ces couleurs de base, il est possible de restituer toutes les couleurs parmi une palette de 16 millions de couleurs environ.

rgb() et rgba() définissent les couleurs dans l'espace sRGB, universellement reconnu par tous les navigateurs et tous les écrans. C'est cependant l'espace de couleurs le plus réduit par rapport aux autres espaces (adobeRGB, ProPhotoRGB), ce qui veut dire que certaines couleurs très saturées ne pourront pas être représentées. Mais cela est en train d'évoluer : reporter vous à la fonction color() pour en savoir plus sur les autres espaces colorimétriques.

La définition des couleurs est très riche en CSS. Reportez à la page sur Les couleurs pour découvrir toutes les autres possibilités permettant de définir une couleur : couleurs nommées, code hexadécimal de la couleur, notation HSL, etc.
Vous pouvez également consulter les pages sur les fonctions hsl(), hwb(), color() et la directive @color-profile.

D'autre part, vous trouverez ici un synthétiseur de couleurs, qui réalise les conversions avec les autres systèmes de définition des couleurs (HSL par exemple).

Les fonctions rgb() et rgba() peuvent être utilisées avec :

• accent-color : Définit la couleur des élément actifs, cochés.
• background-color : Définit la couleur en arrière-plan.
• border-color : Définit la couleur des bordures.
• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• color : Définit la couleur de l'avant plan (texte essentiellement).
• column-rule-color : Définit la couleur des lignes de séparation de colonnes.
• lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
• outline-color : Définit la couleur du contour (outline).
• scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
• text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Syntaxes de la fonction rgb().

• color: rgb(250, 127, 179); color: rgb(98%, 50%, 70%); r g b

  Ancienne syntaxe, conservée pour des raisons de compatibilité. r, g et b sont trois valeurs numériques qui indiquent respectivement la valeur de rouge, de vert et de bleu. Il peut s'agir de trois nombres sans unité compris entre 0 et 255, ou de trois pourcentages, 100% correspondant à la valeur maximale 255.

  Les deux syntaxes données dans notre exemple sont donc équivalentes :
  98% de 255 = 250
50% de 255 = 127
70% de 255 = 179

  Les valeurs décimales sont autorisées, aussi bien avec la première syntaxe que avec la syntaxe en pourcentages. Les valeurs négatives sont ramenées à 0, les valeurs supérieures à 255 sont ramenées à 255.

• color: rgb(250 127 179); color: rgb(98% 50% 70%); r g b

  Une syntaxe alternative a été introduite par le W3C : les valeurs sont séparées par des espaces à la place de virgules. Cette notation est maintenant tout aussi bien reconnue par les navigateurs.

  Il est possible d'écrire none lorsqu'une valeur vaut 0.

• color: rgba(250, 127, 179, 0.5); color: rgba(250, 127, 179, 50%); color: rgba(98%, 50%, 70%, 50%); color: rgba(250 127 179 / 0.5); r g b a

  Toutes ces syntaxes de la fonction rgba() sont équivalentes.

  Le paramètre supplémentaire a est une valeur numérique flottante sans unité, comprise entre 0 et 1, ou un pourcentage compris entre 0 et 100%. Ce paramètre indique l'opacité de la couleur (canal alpha).
  0 pour aucune opacité (transparence totale) et 1 pour une opacité complète ; Les valeurs entre 0 et 1 indiquant une opacité plus ou moins importante.

  Il est possible de séparer les valeurs par un simple espace au lieu d'une virgule, mais attention, dans ce cas, l'opacité a est séparée par un slash.

  Remarque : la fonction rgb() reconnaît maintenant le paramètre a avec une syntaxe exactement identique à celle de rgba(). Cette dernière peut donc être systématiquement remplacée par rgb().

• color: rgb(from lightBlue r 255 b); color: rgb(from lightBlue r 255 b / alpha); c r g b a

  Cette syntaxe permet de calculer une couleur à partir d'une couleur déjà existante. Celle-ci est introduite par le mot from. Dans notre exemple, la couleur de départ est lightBlue dont le code est rgb(173 216 230). On laisse les valeurs de rouge et de bleu inchangées mais la valeur du vert est forcée à 255, on obtient donc la couleur rgb(173 255 230).

  Les variables r, g, b et alpha représentent la valeur dans la couleur de base. Il est possible d'effectuer des calculs sur ces valeurs :

  rgb(from beige r calc(g + 100) b / calc(alpha / 2));

Simulateur avec la fonction rgb()

Comme nous l'avons dit plus haut, la fonction rgba() fait maintenant double emploi avec rgb(). Pour cette raison, ce simulateur ne permet d'explorer que la fonction rgb().

Support de la fonction rgb().

Les navigateurs sont tous capables de traiter les couleurs définies par les valeurs de Rouge, Vert et Bleu (RGB). Quelques subtilités de syntaxe peuvent cependant poser quelques problèmes. Voici comment interpréter le tableau de compatibilité ci-dessous :

1

Fonction
rgb()

2

Paramètre
alpha

3

Valeurs
flottantes

4

Séparteur
espace

Estimation de la prise en charge globale.

97%

94%

94%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la fonction rgb().

• Module CSS - Couleurs - Niveau 3

  Définition initiale de la fonction rgb() acceptant trois paramètres séparés par des virgules. Ceux-ci pourront être trois valeurs numériques de 0 à 255, ou trois pourcentages.
  

  23 Juin 1999

  Document de travail.

  

  14 Mai 2003

  Candidat à la recommandation.

  

  28 Octobre 2010

  Proposé à la recommandation.

  

  07 Juin 2011

  Recommandation.

• Module CSS - Couleurs - Niveau 4

  Introduction d'une variante de syntaxe : les paramètres peuvent être séparés par des espaces.
  

  05 Juillet 2016

  Document de travail.

  

  05 Juillet 2022

  Candidat à la recommandation.

  

  

• Module CSS - Couleurs - Niveau 5

  Introduction des couleurs relatives, qui sont définies par rapport à une autre couleur. La syntaxe de la fonction rgb() est aménagée en conséquence (le mot clé from).
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant la gestion des couleurs.

La fonction rgb() (ainsi que tout ce qui concerne les couleurs) est décrite dans le module CSS Color Module. Les définitions suivantes sont également décrites dans cette spécification :

Propriétés :

Fonctions :

Directives :

Descripteurs :