Les fonctions CSS rgb()
et rgba()
Résumé des caractéristiques de la fonction rgb()
255
.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 R
ed, G
reen, B
lue 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.
rgba(255, 0, 0, 1)
rgba(255, 0, 0, 0)
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 :
accent-color
: Définit la couleur des élément actifs, cochés.background-color
: Définit la couleur de l'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.outline-color
: Définit la couleur de l'encadrement (outline).scrollbar-color
: Définit deux couleurs qui seront appliquées sur les barres de défilement.text-decoration-color
: Définit la couleur du trait de décoration.text-emphasis-color
: Définit la couleur des caractères de mise en exergue.
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(
)
- color: rgb(250, 127, 179); color: rgb(98%, 50%, 70%); r v b
r
,v
etb
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 maximale255
.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) et1
pour une opacité complète ; Les valeurs entre0
et1
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ètrea
avec une syntaxe exactement identique à celle dergba()
. Cette dernière peut donc être systématiquement remplacée parrgb()
. - 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 estlightblue
dont le code estrgb(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 couleurrgb(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()
.
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 :
rgb()
utilisée sous sa forme la plus simple, avec 3 nombres entiers en paramètres.
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()
.
rgb()
et rgba()
utilisées avec des valeurs flottantes au lieu de nombres entiers.
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é.
rgb()
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.
Fonctions.
sRGB
.L*a*b*
.L*C*H*
.L*a*b*
avec une correction perceptive.L*C*H*
avec une correction perceptive.Directives.
color()
.