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).
Ce codage est utilisé par exemple pour les couleurs dans les pages html.
Nous l'utiliserons aussi pour le travail sur le traitement de l'image.
Rouge, vert et bleu
| Code rgb | couleur |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
Exemples de couleurs
| Code rgb | couleur |
| rgb(150,0,0) | |
| rgb(0,150,0) | |
| rgb(0,0,150) | |
| rgb(255,0,255) | |
| rgb(0,255,255) | |
| rgb( 255,255,0) | |
Vous pouvez également facilement parcourir les codages RGB en cliquant sur l'élément de formulaire suivant :
Firefox fait apparaître les deux autres codages usuels des couleurs lorsque vous choisissez une couleur dans cet élément de formulaire
(ce n'est pas le cas avec Chrome).
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 \) → ba,
213 : \( 213= 13\times 16+5= d\times 16+5\) → d5,
14 : \( 14 = 0\times 16+ 14 =0\times 16+ e\) → 0e |
#bad50e |
| rgb(255,0,16) |
255 : \( 255 = 15 \times 16 + 15 = f \times 16 + f \) → ff,
0 : \( 0 = 0\times 16+0\) → 00,
16 : \( 16= 1\times 16+ 0 \) → 10 |
#ff0010 |
Le codage hsl
HSL signifie Hue, Saturation, Lightness, c'est à dire teinte, saturation, luminosité.
Ce codage peut être pratique si l'on veut par exemple rester dans les verts et jouer seulement sur la saturation et la luminosité. Lisez cette page pour approfondir un peu cette question.
Exemple de rouges de plus en plus lumineux (on fait évoluer la troisième composante du code hsl) :
Exemples de couleurs
| Code hsl | couleur |
| hsl(0,100%,25%) | |
| hsl(0,100%,35%) | |
| hsl(0,100%,45%) | |
| hsl(0,100%,55%) | |
| hsl(0,100%,65%) | |
| hsl(0,100%,75%) | |
| hsl(0,100%,85%) | |
Variations sur la saturation (on fait évoluer la deuxième composante du code hsl) :
Exemples de couleurs
| Code hsl | couleur |
| hsl(0,100%,50%) | |
| hsl(0,90%,50%) | |
| hsl(0,80%,50%) | |
| hsl(0,70%,50%) | |
| hsl(0,60%,50%) | |
| hsl(0,50%,50%) | |
| hsl(0,40%,50%) | |
| hsl(0,30%,50%) | |
Le passage du code RGB au code HSL est légèrement plus complexe que le passage de RGB à l'hexadécimal.
- Sur cette page, vous trouverez un convertisseur de RGB à HSL ainsi que les formules correspondantes.
- Sur cette page, vous trouverez un convertisseur de HSL à RGB ainsi que les formules correspondantes.
Le codage RGBa
Au code RGB, on peut ajouter une composante, la composante alpha qui joue sur l'opacité.
Une couleur très opaque cachera complétement une figure se trouvant sous cette couleur, une couleur peu opaque laissera apparaître par transparence la figure située en-dessous.
La composante alpha varie entre 0 (transparent) et 1 (opaque).
Exemple.
Modifiez, pour mieux saisir le fonctionnement, la valeur de la composante alpha dans le code css de l'élément
div d'identifiant deux.
Essayez notamment la valeur 1 (le coin du rectangle du dessous sera alors complétement masqué) puis
essayez une valeur telle que 0.2...
Les couleurs nommées
Un certain nombre de couleurs peuvent être utilisées dans le code CSS avec un nom explicite.
Vous trouverez sur cette page des noms généralement reconnus par les navigateurs.
Exemple.