Les couleurs
Une liste restreinte de couleurs
Le HTML et le XHTML proposent un petit nombre de couleurs prédéfinies dont les principales sont :
| - black (example) | - blue (example) | - fuchsia (example) |
| - gray (example) | - green (example) | - lime (example) |
| - maroon (example) | - navy (example) | - olive (example) |
| - purple (example) | - red (example) | - silver (example) |
| - teal (example) | - white (example) | - yellow (example) |
Exemple d'utilisation, si vous saisissez ceci entre les balises <body> et </body> :
<p><font color="fuchsia">Texte en rose fuchsia.</font></p>
Vous aurez dans votre navigateur :
Texte en rose fuchsia.
Cette liste de couleurs étant très reduité, il existe un système permettant de choisir la nuance de couleurs que l'on souhaite.
Deux modèles de couleurs, un seul pour le Web
Le modèle de couleur CMJ
Si vous avez fait de la peinture, vous savez certainement que l'on peut obtenir n'importe quelle couleur en mélangeant les 3 couleurs primaires que sont le bleu (cyan), le rouge (magenta) et le jaune. En imprimerie, on y ajoute le Noir (pour facilité l'obtention de gris) et on parle de couleurs CMJN (Cyan Magenta Jaune Noir) ou CMYK (Cyan Magenta, Yellow, Black) en anglais.
Le modèle de couleur RVB
Sur un écran d'ordinateur ou en vidéo, on utilise également 3 couleurs primaires mais elles diffèrent légèrement. On utilise en fait le Rouge, le Vert et le Bleu pour obtenir toutes les nuances que l'on souhaite. On parle de couleurs RVB (Rouge Vert Bleu) ou RGB (Red Green Blue) en anglais.
| Le modèle de couleur CMJ | Le modèle de couleur RVB |
|---|---|
 |
 |
| On dit que le cyan, le magenta et le jaune sont les couleurs primaires en synthèse soustractive, c'est à dire que l'addition des 3 couleurs tend vers le noir (observer le centre de l'image). | On dit que le rouge, le vert et le bleu sont les couleurs primaires en synthèse additive, c'est à dire que l'addition des 3 couleurs tend vers le blanc (observer le centre de l'image). |
Dans les pages Web, nous utilisons le modèle de couleur RVB (RGB en anglais).
Les codes de couleurs RGB pour le Web
Un code couleur RGB sera donc composé de 3 nombres :
- le premier correspond à la valeur de Rouge
- le deuxième correspond à la valeur de Vert
- le dernier correspond à la valeur de Bleu
- Chaque nombre varie de 0 à 255 soit 256 intensités différentes par couleur.
Par exemple, si le rouge est à 255, que le vert est à 0 et le bleu à 0 également, nous obtiendrons un rouge pure.
Cependant, dans notre code HTML ou XHTML, nous n'utilisons pas directement ces valeurs décimales, mais leurs équivalent héxadécimales !
- Nous avons l'habitude de compter en décimal : avec dix chiffres allant de 0 à 9. On dit également que l'on compte en base 10
- En héxadécimal, on compte avec 16 chiffres, allant de 0 à F. On dit alors que l'on compte en base 16.
- Ce format est très utilisé en informatique car il est plus facile à convertir pour les ordinateurs (qui eux compte en binaire, c'est à dire en base 2).
| En décimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| En héxadécimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
En décimal, quand on arrive au dernier chiffre disponible (9), on ajoute une dizaine et on remet l'unité à 0 (10).
En héxadécimal, c'est identique. Quand on arrive au dernier chiffre disponible (F), on décale d'un cran et remet l'unité à 0 (10). Ainsi, 16 en décimal vaut 10 en héxadécimal. Nous pouvons donc continuer à compter....
| En décimal | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ... |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| En héxadécimal | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F | 20 | ... |
Et ce jusque 255 pour nos valeurs de couleurs :
| En décimal | ... | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| En héxadécimal | ... | EF | F0 | F1 | F2 | F3 | F4 | F5 | F6 | F7 | F8 | F9 | FA | FB | FC | FD | FE | FF |
Les valeurs de chaque composant RVB en HTML vont donc de 00 à FF.
Un code héxadécimal d'une couleur pourra ainsi s'écrire avec 6 chiffres : les 2 premiers donnent la valeur de rouge, les 2 suivants la valeur de vert et les 2 derniers le bleu.
Ainsi, le rouge pur sera codé ainsi : #FF0000. Le caractère # sert à indiquer au navigateur que l'on donne un code et pas le nom d'une couleur.
Une petite application pour mieux comprendre
Déplacez les curseurs rouge, vert et bleu pour obtenir la couleur de votre souhait. Le code de couleur correspondant à votre choix s'affiche au dessus de la tête du mouton (oui, il s'agit d'un mouton).
Télécharger cette application pour Windows | Télécharger cette application pour Mac
En résumé
Dans nos page web, on peut préciser une couleur de manière très précise avec un code héxadécimal qui se présente ainsi :
#RRVVBB
- # permet d'indiquer que l'on donne un code de couleur
- RR est un nombre allant de 00 à FF donnant la valeur de rouge
- VV est un nombre allant de 00 à FF donnant la valeur de vert
- BB est un nombre allant de 00 à FF donnant la valeur de bleu
Si vous ne comprenez pas le pourquoi du comment, ni le calcul en héxadécimal, sachez que vous pourrez obtenir facilement le code d'une couleur HTML en choisissant dans une palette dans la plupart des logiciels d'image (photoshop, flash) ou avec Dreamweaver. Vous pouvez également utiliser la petite application ci-dessus.
Exemple d'utilisation de codes couleurs :
<font color="#000000">Texte noir.</font> <font color="#ffffff">Texte blanc.</font> <font color="#ff0000">Texte rouge.</font> <font color="#660000">Texte rouge sombre.</font> <font color="#0000ff">Texte bleu.</font> <font color="#00cccc">Texte turquoise.</font> <font color="#ffff00">Texte jaune.</font> <font color="#999999">Texte gris...</font>
Dans votre navigateur vous verrez :
