Le codage RGB
RGB signifie red, green, blue.
Le codage RGB des couleurs consiste à attribuer un 'degré' de rouge, un 'degré' de vert, et enfin un 'degré' de bleu à la couleur.
Ces 'degrés' sont des entiers entre 0 et 255 (c'est à dire entre 0 et 28-1).
Exemples de couleurs
| Code rgb | couleur |
| rgb(255,0,0) | |
| rgb(150,0,0) | |
| rgb(0,255,0) | |
| rgb(0,150,0) | |
| rgb(0,0,255) | |
| rgb(0,0,150) | |
| rgb(255,0,255) | |
| rgb(0,255,255) | |
| rgb( 255,255,0) | |
Vous pouvez également facilement parcourir les codages RGB grâce à l'élément de formulaire suivant
(qui fait apparaître deux autres types de codage) :
Le codage hexadecimal
Exemples de correspondance rgb-hexa
Exemples de couleurs
| Code rgb | couleur | Code hexadécimal |
| rgb(255,0,0) | |
#ff0000 |
| rgb(150,0,0) | |
#960000 |
| rgb(0,255,0) | |
#00ff00 |
| rgb(0,150,0) | |
#009600 |
| rgb(0,0,255) | |
#0000ff |
| rgb(0,0,150) | |
#000096 |
| rgb(255,0,255) | |
#ff00ff |
| rgb(0,255,255) | |
#00ffff |
| rgb( 255,255,0) | |
#ffff00 |
Le codage hexadécimal
Le codage hexadécimal d'une couleur est constitué de six 'chiffres'
pris parmi les chiffres 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
Les chiffres a, b, c, d, e, f représentent 10, 11, 12, 13, 14, 15.
Du codage hexadécimal au codage rgb
Pour passer du codage hexadécimal au codage rgb, on regroupe les chiffres du codage hexadécimal par deux. Le groupe de deux lettres
'xy' représente un entier en base 16. Il s'agit de le traduire en base 10. L'entier en base 10 correspondant est 16x+y.
De l'hexadécimal au rgb
| Code hexadécimal | opération | Code rgb |
| #fa12b5 |
fa : \( f \times 16 + a = 15 \times 16 + 10 = 250 \),
12 : \( 1\times 16+2= 18\),
b5 : \( b\times 16+ 5 =11\times 16+ 5 =181\) |
rgb(250,18,181) |
| #0d50aa |
0d : \( 0 \times 16 + d = 0 \times 16 + 13 = 13 \),
50 : \( 5\times 16+0= 80\),
aa : \( a\times 16+ a =10\times 16+ 10=170\) |
rgb(13,80,170) |
Du codage rgb au codage hexadécimal
Pour écrire un entier (écrit en base 10, c'est à dire la base usuelle) compris entre 0 et 255 en hexadécimal,
on pose la division (entière) de l'entier par 16, le quotient et le reste donnent les chiffres de l'écriture hexadécimale.
Du rgb à l'hexadécimal
| Code rgb | division | Code hexadécimal |
| rgb(186, 213, 14) |
186 : \( 186 = 11\times 16 + 10 = b \times 16 + a \),
213 : \( 213= 13\times 16+5= d\times 16+5\),
14 : \( 14 = 0\times 16+ 14 =0\times 16+ e\) |
#bad50e |
| rgb(255,0,16) |
255 : \( 255 = 15 \times 16 + 15 = f \times 16 + f \),
0 : \( 0 = 0\times 16+0= 00\),
16 : \( 16= 1\times 16+ 0 \) |
#ff0010 |
Codage hsl
Le troisième codage qui apparaît dans l'élément de formulaire donné ci-dessus est le codage hsl (h : hue (teinte), s: saturation,
l : luminosité).
Nous ne rentrerons pas dans les détails de ce codage.
La couleur du texte
On indique la couleur du texte d'un élément html par la propriété color.
On indique les valeurs de cette propriété color en code rgb, hexadécimal ou hsl.
On peut également indiquer directement un certain nombre de couleurs par un nom prédéfini.
La couleur des bordures
Tous les éléments html sont compris dans des boîtes rectangulaires (de bords parallèles à l'écran).
On peut border ces boîtes avec des bordures de différentes épaisseurs et couleurs.
C'est la propriété border-color qui permet d'attribuer la couleur de bordure.
Lorsqu'un élément a une bordure d'épaisseur non nulle et que la propriété border-color n'est pas renseignée, la couleur de bordure est alors égale à la couleur du texte (donnée par la valeur de la propriété color).
background
La couleur de fond de chaque boîte d'élément html est donnée par la valeur de la propriété css background-color.
La valeur par défaut de cette propriété est 'transparent'.
Le code RGBA
On peut ajouter un quatrième nombre (compris entre 0 et 1) au code RGB.
Ce quatrième nombre agit sur la transparence.