Conception & Réalisation de sites Web

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
Le modèle de couleur CMJ Le modèle de couleur RGB
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 :

Texte noir. Texte blanc. Texte rouge. Texte rouge sombre. Texte bleu. Texte turquoise. Texte jaune. Texte gris...
Copyright © 2014 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!