Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les fonctions CSS rgb() et rgba()

rgb()

Résumé des caractéristiques de la fonction rgb()

Description rapide
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
Statut
Standard
Pourcentages
Calculés par rapport à la valeur maximale des chacun des paramètres, à savoir 255.
Module W3C
Module CSS - Couleurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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.

Couleur opaque
rgba(255, 0, 0, 1)
Couleur transparente
rgba(255, 0, 0, 0)
Couleur semi-opaque
rgba(255, 0, 0, 0.5)

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

border-color: rgb(27, 40,3 5); color: rgba(110, 255, 47, 0.5);

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.

La définition des couleurs est très riche en CSS. Reportez à la page sur les couleurs CSS 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 Object, 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 :

Syntaxe de rgb() et rgba().

r, g et b sont les valeurs de rouge,de vert et de bleu.
α est la valeur de l'opacité (canal alpha).
c est une couleur de référence.

rgb(
Schéma syntaxique de la fonction rgb() en CSSSyntaxe de la fonction rgb() pour définir une couleur avec CSS. from c from c r g b r g b / α / α
)
  • color: rgb(250, 127, 179); color: rgb(98%, 50%, 70%); r v b

    r, v 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 v 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.

  • 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 v 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 / a); c r v 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).

Simulateur (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().

background-color :

Compatibilité des navigateurs.

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 :

Colonne 1
Prise en charsge de la fonction rgb() utilisée sous sa forme la plus simple, avec 3 nombres entiers en paramètres.
Colonne 2
Prise en charge de la fonction rgb() utilisée avec quatre paramètres, le dernier étant l'opacité de la couleur. Si non reconnue, cette syntaxe peut être facilement remplacée par une syntaxe avec la fonction rgba().
Colonne 3
Prise en charge des fonctions rgb() et rgba() utilisées avec des valeurs flottantes au lieu de nombres entiers.
Colonne 4
Prise en charge des fonctions rgb() et rgba() avec la nouvelle syntaxe : des espaces utilisés pour séparer les paramètres, et un caractère / pour introduire l'opacité.
1
rgb()
2
Alpha parameter
3
Float values
4
New syntax
Estimation de la prise en charge en pourcentage du parc actuel.
97%
95%
95%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que rgb().

Les spécifications CSS éditées par le W3C sont organisées en modules. rgb() fait partie du Module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur de l'avant plan (texte essentiellement).
Opacité (ou transparence).

Fonctions.

Définit une couleur dans un espace de couleurs autre que sRGB.
Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
Définit une couleur dans le système L*a*b*.
Définit une couleur dans le système L*C*H*.
Définit une couleur dans le système L*a*b* avec une correction perceptive.
Définit une couleur dans le système L*C*H* avec une correction perceptive.
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives.

Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().