Couleurs CSS RVB et RGBA


Table des matières

    Afficher la table des matières


Une valeur de couleur RVB représente la lumière ROUGE, VERTE et BLEUE sources.


Valeur RVB

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

255

GREEN

0

BLUE

0

Exemple

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

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 :

Exemple

rgb(60, 60, 60)
rgb(90, 90, 90)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(210, 210, 210)
rgb(240, 240, 240)

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>




Valeur RVBA

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

255

GREEN

0

BLUE

0

ALPHA

0

Exemple

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

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>