Une valeur de couleur RVB représente la lumière ROUGE, VERTE et BLEUE sources.
En CSS, une couleur peut être spécifiée comme valeur RVB, en utilisant cette formule :
rgb(rouge, vert, bleu)
Chaque paramètre (rouge, vert et bleu) définit l'intensité de la couleur entre 0 et 255.
Par exemple, rgb(255, 0, 0) s'affiche en rouge, car le rouge est réglé à sa valeur la plus élevée (255) et les autres sont mis à 0.
Pour afficher le noir, définissez tous les paramètres de couleur sur 0, comme ceci : rgb(0, 0, 0).
Pour afficher le blanc, définissez tous les paramètres de couleur sur 255, comme ceci : RVB (255, 255, 255).
Expérimentez en mélangeant les valeurs RVB ci-dessous :
RED
GREEN
BLUE
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
Les nuances de gris sont souvent définies en utilisant des valeurs égales pour les 3 sources lumineuses :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
</body>
</html>
Les valeurs de couleur RVBA sont une extension des valeurs de couleur RVB avec un canal alpha - qui précise l'opacité d'une couleur.
Une valeur de couleur RGBA est précisé avec :
rgba(rouge, vert, bleu, alpha)
Le paramètre alpha est un nombre entre 0,0 (entièrement transparent) et 1,0 (pas transparent du tout) :
Expérimentez en mélangeant les valeurs RGBA ci-dessous :
RED
GREEN
BLUE
ALPHA
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with RGBA</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
</body>
</html>