rgb()

Exemple interactif

background: rgb(31 120 50);

background: rgb(30% 20% 50%);

background: rgb(255 122 127 / 80%);

background: rgb(255 122 127 / 0.2);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Syntaxe

/* Valeurs absolues */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* Valeurs relatives */
rgb(from green r g b / 0.5)
rgb(from #123456 calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

/* Alias 'rgba()' hérité */
rgba(0 255 255)

/* Format hérité */
rgb(0, 255, 255)
rgb(0, 255, 255, 50%)

Valeurs

Vous trouverez ci-dessous les descriptions des valeurs autorisées pour les couleurs absolues et relatives.

Syntaxe des valeurs absolues

rgb(R G B[ / A])

Les paramètres sont les suivants :

R, G, B

Chaque valeur peut être un nombre (<number>) entre 0 et 255, un pourcentage (<percentage>) entre 0% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Ces valeurs représentent respectivement les canaux rouge, vert et bleu.

A Facultatif

Une valeur <alpha-value> représentant la valeur du canal alpha de la couleur, où le nombre 0 correspond à 0% (complètement transparent) et 1 correspond à 100% (complètement opaque). De plus, le mot-clé none peut être utilisé pour définir explicitement l'absence de canal alpha. Si la valeur du canal A n'est pas définie explicitement, elle vaut par défaut 100%. Si elle est incluse, la valeur est précédée d'une barre oblique (/).

Syntaxe des valeurs relatives

rgb(from <color> R G B[ / A])

Les paramètres sont les suivants :

from <color>

Le mot-clé from est toujours inclus lors de la définition d'une couleur relative, suivi d'une valeur <color> représentant la couleur d'origine : il s'agit de la couleur originale sur laquelle la couleur relative est basée. La couleur d'origine peut être n'importe quelle syntaxe <color> valide, y compris une autre couleur relative.

R, G, B

Chaque valeur peut être un nombre (<number>) entre 0 et 255, un pourcentage (<percentage>) entre 0% et 100%, ou le mot-clé none (équivalent à 0% dans ce cas). Ces valeurs représentent respectivement les canaux rouge, vert et bleu de la couleur de sortie.

A Facultatif

Une valeur <alpha-value> représentant la valeur du canal alpha de la couleur de sortie, où le nombre 0 correspond à 0% (complètement transparent) et 1 correspond à 100% (complètement opaque). De plus, le mot-clé none peut être utilisé pour définir explicitement l'absence de canal alpha. Si la valeur du canal A n'est pas définie explicitement, elle prend par défaut la valeur du canal alpha de la couleur d'origine. Si elle est incluse, la valeur est précédée d'une barre oblique (/).

Définition des composants de canal de couleur de sortie relative

Lors de l'utilisation de la syntaxe de couleur relative dans une fonction rgb(), le navigateur convertit la couleur d'origine en une couleur RGB équivalente (si elle n'est pas déjà définie comme telle). La couleur est définie comme trois valeurs distinctes de canal de couleur — r (rouge), g (vert), et b (bleu) — plus une valeur de canal alpha (alpha). Ces valeurs de canal sont rendues disponibles dans la fonction pour être utilisées lors de la définition des valeurs de canal de couleur de sortie :

• Les valeurs r, g et b sont chacune résolues en <number> entre 0 et 255, inclus.
• Le canal alpha est résolu en un <number> entre 0 et 1, inclus.

Lors de la définition d'une couleur relative, les différents canaux de la couleur de sortie peuvent être exprimés de plusieurs façons différentes. Ci-dessous, nous étudierons quelques exemples pour illustrer cela.

Dans les deux premiers exemples ci-dessous, nous utilisons la syntaxe de couleur relative. Cependant, le premier produit la même couleur que la couleur d'origine et le second produit une couleur qui n'est pas du tout basée sur la couleur d'origine. Ils ne créent pas vraiment de couleurs relatives ! Vous seriez peu susceptible d'utiliser cela dans une vraie base de code, et utiliseriez probablement simplement une valeur de couleur absolue à la place. Nous avons inclus ces exemples comme point de départ pour apprendre la syntaxe relative rgb().

Commençons par une couleur d'origine de hsl(0 100% 50%) (équivalent à rgb(255 0 0)). La fonction suivante produit la même couleur que la couleur d'origine — elle utilise les valeurs de canal r, g et b de la couleur d'origine (255, 0 et 0) comme valeurs de canal de sortie :

rgb(from hsl(0 100% 50%) r g b)

La couleur de sortie de cette fonction est l'équivalent sRGB color() de rgb(255 0 0) : color(srgb 1 0 0).

La fonction suivante utilise des valeurs absolues pour les canaux de la couleur de sortie, produisant une couleur complètement différente non basée sur la couleur d'origine :

rgb(from hsl(0 100% 50%) 132 132 224)

Dans le cas ci-dessus, la couleur de sortie est l'équivalent sRGB color() de rgb(132 132 224) : color(srgb 0.517647 0.517647 0.878431).

La fonction suivante crée une couleur relative basée sur la couleur d'origine :

rgb(from hsl(0 100% 50%) r 80 80)

Cet exemple :

• Convertit la couleur d'origine (hsl(0 100% 50%)) en une couleur rgb() équivalente (rgb(255 0 0)).
• Définit la valeur du canal R pour la couleur de sortie à celle de la valeur du canal R de l'équivalent rgb() d'origine — 255.
• Définit les valeurs des canaux G et B de la couleur de sortie à de nouvelles valeurs non basées sur la couleur d'origine : 80 et 80 respectivement.

La couleur de sortie finale est l'équivalent de rgb(255 80 80) dans l'espace colorimétrique sRGB — color(srgb 1 0.313726 0.313726).

Dans les exemples que nous avons vus jusqu'à présent dans cette section, les canaux alpha n'ont pas été explicitement définis pour les couleurs d'origine ou de sortie. Lorsque le canal alpha de la couleur de sortie n'est pas défini, il prend par défaut la même valeur que le canal alpha de la couleur d'origine. Lorsque le canal alpha de la couleur d'origine n'est pas défini (et qu'il ne s'agit pas d'une couleur relative), il vaut par défaut 1. Par conséquent, les valeurs de canal alpha d'origine et de sortie sont 1 pour les exemples ci-dessus.

Examinons quelques exemples qui définissent les valeurs de canal alpha d'origine et de sortie. Le premier définit la valeur du canal alpha de sortie comme étant la même que la valeur du canal alpha d'origine, tandis que le second définit une valeur de canal alpha de sortie différente, non liée à la valeur du canal alpha d'origine.

rgb(from hsl(0 100% 50% / 0.8) r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

Dans l'exemple suivant, la couleur d'origine hsl() est à nouveau convertie en représentation rgb() — rgb(255 0 0). Des calculs calc() sont appliqués aux valeurs R, G, B et A. Après calcul, les valeurs R, G, B et A sont respectivement 127.5, 25, 175 et 0.9. La couleur de sortie finale est l'équivalent de rgb(127.5 25 175 / 0.9) dans l'espace colorimétrique sRGB : color(srgb 0.5 0.0980392 0.686275 / 0.9).

rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))

Syntaxe formelle

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>  

Exemples

Syntaxe de base

Dans cet exemple, nous avons trois éléments <div> avec différentes couleurs d'arrière-plan affichées sur un fond rayé.

HTML

<div>
  <div id="integer"></div>
  <div id="percent"></div>
  <div id="alpha"></div>
</div>

CSS

Les couleurs d'arrière-plan sont définies à l'aide de la fonction de couleur rgb(). Les trois couleurs sont identiques. La troisième est semi-transparente, donc nous avons inclus un repeating-linear-gradient() sur le <body> pour mieux démontrer la transparence des canaux alpha.

div {
  display: flex;
  gap: 20px;
  height: 50px;
  flex: 1;
}
body {
  height: calc(100vh - 20px);
}

body {
  background: repeating-linear-gradient(-45deg, #eeeeee 0 2px, white 2px 6px);
  padding: 10px;
}

#integer {
  background-color: rgb(189 85 218);
}

#percent {
  background-color: rgb(74% 33% 85%);
}

#alpha {
  background-color: rgb(189 85 218 / 0.25);
}

Résultat

Utilisation des couleurs relatives avec rgb()

Cet exemple met en forme trois éléments <div> avec différentes couleurs d'arrière-plan. Celui de gauche reçoit la --base-color non modifiée, tandis que les deux autres reçoivent des variantes de cette --base-color qui retirent progressivement du rouge et ajoutent du bleu.

Ces variantes sont définies en utilisant des couleurs relatives — la propriété personnalisée --base-color est passée dans une fonction rgb(), et la couleur de sortie a ses canaux rouge et bleu modifiés pour obtenir l'effet désiré via des fonctions calc(), tandis que le canal vert reste inchangé.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
  /* equal to rgb(255 165 0) */
}

#one {
  background-color: var(--base-color);
}

#two {
  background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
  /* 76.5 is 30% of 255 */
}

#three {
  background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
  /* 153 is 60% of 255 */
}

/* Use @supports to add in support for old syntax that requires r g b values to
   be specified as percentages (with units) in calculations. This is required
   for Safari 16.4+. */
@supports (color: rgb(from red r g calc(b + 30%))) {
  #two {
    background-color: rgb(from var(--base-color) calc(r - 30%) g calc(b + 30%));
  }

  #three {
    background-color: rgb(from var(--base-color) calc(r - 60%) g calc(b + 60%));
  }
}

Résultat

Syntaxe héritée : valeurs séparées par des virgules

Pour des raisons de compatibilité, la fonction rgb() accepte une forme où toutes les valeurs sont séparées par des virgules.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 50%);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de données <color> pour une liste de toutes les notations de couleur
• Outil de conversion de format de couleur
• Utilisation des couleurs relatives
• Le module des couleurs CSS