Définir la couleur via RGB en CSS
Au tout début du tutoriel, lorsque nous avons étudié
les couleurs, je vous ai dit que la couleur pouvait être définie
soit par un mot anglais, soit via rgb,
soit via #. Ces deux derniers formats
permettent d'obtenir une couleur de n'importe quelle nuance. Voyons
comment fonctionnent précisément ces formats.
Pour comprendre ces méthodes, nous devons d'abord comprendre comment la couleur souhaitée est obtenue sur l'écran d'un ordinateur.
En réalité, un point individuel de l'écran (pixel) ne peut pas émettre toutes les couleurs nécessaires, car ce serait techniquement très complexe. Chaque point de l'écran ne peut émettre que trois couleurs : le rouge, le vert et le bleu. Mais simultanément et dans des proportions différentes.
En combinant ces couleurs, nous pouvons obtenir n'importe quelle couleur dont nous avons besoin, un peu comme le font les peintres avec les couleurs : en mélangeant plusieurs couleurs, ils en obtiennent une nouvelle.
Pour mélanger les couleurs en CSS, vous devez
indiquer le mot-clé rgb comme valeur
de la propriété, puis énumérer après, séparés par des virgules,
les nombres définissant dans quelles proportions prendre ces
trois couleurs de base. Les couleurs elles-mêmes peuvent varier
de 0 à 255. Zero -
correspond à l'absence de couleur, et 255 correspond à
la couleur pure (par exemple,
du rouge pur).
Les lettres rgb signifient
red, green, blue.
Regardons des exemples.
Exemple
Mélangeons du rouge pur et du bleu pur.
Pour cela, nous mettons la première valeur à
255, la seconde à 0, et la troisième -
à 255. Nous obtiendrons une
couleur violette :
<p>
texte
</p>
p {
color: rgb(255, 0, 255);
}
:
Exemple
Mettons maintenant la première valeur
à 255, et toutes les autres à zéro. En
résultat, nous obtiendrons du rouge pur :
<p>
texte
</p>
p {
color: rgb(255, 0, 0);
}
:
Exemple
Voici comment obtenir du vert pur :
<p>
texte
</p>
p {
color: rgb(0, 255, 0);
}
:
Exemple
Et si pour le vert on ne met pas 255,
mais 100, on obtiendra du
vert partiel :
<p>
texte
</p>
p {
color: rgb(0, 100, 0);
}
:
Exemple
Mélangeons les trois couleurs dans des proportions arbitraires. Regardez ce que cela donne :
<p>
texte
</p>
p {
color: rgb(200, 100, 125);
}
:
Exemple
Si on met toutes les valeurs à 255,
on obtiendra du blanc pur :
p {
color: rgb(255, 255, 255);
}
Exemple
Si on met toutes les valeurs à 0, on
obtiendra du noir pur :
p {
color: rgb(0, 0, 0);
}
Tâches pratiques
En définissant la couleur via rgb, rendez tous
les paragraphes rouges.
En définissant la couleur via rgb, rendez tous
les h2 verts.
En définissant la couleur via rgb, rendez tous
les h3 bleus.
Mélangez du rouge pur et du vert pur. Quelle couleur obtenez-vous ?
