Aux origines du World Wide Web, la couleur était le seul luxe que pouvait s'offrir les premiers sites internet. C'était bien avant la prise en charge des images, des feuilles de style, puis du Flash.

Petit tour d'horizon des généralités sur les couleurs...

---

Il existe deux façons d'écrire une couleur : par son nom (dans ce cas, vous serez limité à 16 + 21 noms officiellement reconnus par les versions 4 & supérieures d'IE et de NN) ou par son code hexadécimal.

Les 16 couleurs de base, par leurs noms

	black (noir) #000000		marron (marron) #800000		green (vert) #008000		olive (vert olive) #808000
	navy (bleu marine) #000080		purple (violet) #800080		teal (cyan foncé) #008080		gray (gris) #808080
	silver (argent) #c0c0c0		red (rouge) #ff0000		lime (vert clair) #00ff00		yellow (jaune) #ffff00
	blue (bleu) #0000ff		fuchsia (rose) #ff00ff		aqua (bleu clair) #00ffff		white (blanc) #ffffff

Les 21 couleurs 'étendues'... et leurs petits noms

	blueviolet (bleu-violet) #8a2be2		bisque (beige) #ffe4c4		brown (beige/brun) #a52a2a
	azure (bleu azur) #f0ffff		chartreuse (vert chartreuse) #f0ffff		chocolate (brun clair) #d2691e
	cornsilk (rose clair) #fff8dc		darkgreen (vert foncé) #006400		deepskyblue (bleu ciel) #00bfff
	darkorchid (mauve foncé) #9932cc		darkorange (orange foncé) #ff8c00		orange (orange) #ffa500
	turquoise (bleu turquoise) #40e0d0		gold (jaune or) #ffd700		lavender (lavande) #e6e6fa
	pink (rose) #ffc0cb		plum (prune) #dda0dd		salmon (rose saumon) #fa8072
	snow (blanc neige) #fffafa		ivory (beige ivoire) #fffff0		wheat (jaune paille) #f5deb3

Ces 21 couleurs 'étendues' sont pour certaines des variations 'foncées' de couleurs existantes, de la forme dark&color. Sachez que des versions light&color existent, mais sont beaucoup moins compatibles, car elles n'ont jamais été reconnues et intégrées à la totalité des navigateurs.

---

Les couleurs hexadécimales

Avant de rentrer plus en avant dans les couleurs hexadécimales, il faut déjà savoir ce qu'est l'hexadécimal. C'est un système numérique, appelé Base 16 (pour info, le binaire c'est le Base 2, et le décimal, le Base 10. Encore plus fort, les chiffres soixante-dix, quatre-vingt et quatre-vingt-dix sont des rescapés du système vigésimal, Base 20, qui a été utilisé en France pendant quelques décennies. Ceux qui critiquent les belges et les suisses qui comptent avec septante, octante et nonante feraient donc mieux de se taire, puisque ce sont les véritables noms de 70, 80 et 90 en Base 10, qu'on se le dise).

Donc, l'hexadécimal est un système à base 16, il utilise 16 chiffres, de zéro à F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F).

Écrire une valeur en hexadécimal, c'est écrire les valeurs 'rouge,vert,bleu' d'une couleur sous la forme #RRVVBB, où RR, VV et BB sont des valeurs hexadécimales. Pour se donner un ordre d'idée, la valeur 00 c'est 0 %, et FF 100 %, pour faire du rouge, c'est donc #FF0000, soit 100 % rouge, 0 % vert et 0 % bleu.

La plupart des éditeurs HTML, qu'ils soient de base ou très évolués, donnent au minimum la liste des couleurs, au mieux une palette éditable autorisant la modification des couleurs et la création de toutes sortes de variations, qu'il n'est pas possible de faire à l'aide des noms, cela en ferait trop (16,7 millions de couleurs, imaginez la taille de la liste et les noms folkloriques que cela pourrait avoir...).

---

Les couleurs en pratique

Maintenant que l'on sait comment écrire une couleur, voyons comment l'utiliser. Je vous disais que bien avant les feuilles de styles, le langage HTML permettait de jouer avec les couleurs.

Exemples :

-1) Définir la couleur de fond d'une page, la couleur de base du texte, la couleur des liens hypertextes, des liens déjà visités et des liens sélectionnés (sur lequel il y a le 'focus'). C'est du HTML version 2, c'est complètement obsolète et c'est tout juste bon pour un exemple, n'utilisez surtout pas cela dans votre code !!

On peut faire aussi bien appel aux noms qu'aux codes, à la condition que ces derniers soient précédés du #.

-2) Définir la couleur du texte, à la 'volée'.

Encore une fois, cette portion de code n'est là que pour l'exemple, je vous recommande vivement d'adopter les feuilles de style pour appliquer des couleurs spécifiques à vos textes...

---

Couleur = Thématique ou Thématique = Couleur ?

Avant de se lancer tête baissée dans le développement de votre page web, il y quand même quelques conseils dont vous devez impérativement prendre connaissance. La chose à ne jamais faire, c'est de choisir une des 16 couleurs de base pour couleur de fond ou de texte. La plupart sont trop flashy ou 'inexpressive', entre guillemets, et ferait fuir vos visiteurs avant même qu'ils aient lu la première ligne... En plus, un site doit avoir une personnalité. Ce n'est pas tellement lié à la présentation générale des informations (disposition en colonnes, utilisation d'images, ...) mais bel et bien aux couleurs. Dans le domaine de la communication, on appelle cela l'identité visuelle et la charte graphique en découle naturellement. Les couleurs reflètent le contenu et les 'intentions' des auteurs, au niveau des informations qu'ils veulent faire passer.

Blanc
Le blanc évoque la froideur, le silence, l'hiver... Mais doit quand même être présent dans au moins 50 % de votre site ! Le blanc a une connotation professionnelle, high-tech.

Noir
C'est une couleur, humm..., "ambiguë". Elle s'associe au luxe, à l'élégance... et à la détresse, la fin. Utilisée sur les sites traitant de cinéma, d'art, de culture.

Gris
Mélange du noir et du blanc cités ci-dessus, c'est à la fois une couleur triste et moderne. Domaine du design, de la photographie.

Bleu
Le ciel, la mer, l'infini... C'est une couleur qui apaise. Le bleu représente la pensée, et est donc associé aux sciences, l'informatique, le high-tech, la médecine...

Rouge
C'est LA couleur chaude par excellence. évoque le sang, le feu, l'action. S'associe à la pub et aux médias.

Vert
Couleur fraîche, elle a le même effet apaisant que le bleu. S'utilise sur les sites parlant de nature, de loisirs... zen ¦

Jaune
Couleur lumineuse, elle inspire la jeunesse, la vitalité et le soleil. Utilisé par ce qui parle du tourisme, du divertissement...

Orange
Couleur stimulante, lisible. Utilisée pour le sport, les divertissements.

Violet
Mélange de bleu et de rouge, un peu mélancolique. Est associé à l'art et à la culture.

Bien sûr, ce ne sont que des recommandations. Et ce n'est pas parce que telle ou telle couleur est associée à une thématique qu'il faut se servir de celle-là uniquement. Il existe des règles complémentaires à la couleur thématique.

Déjà, votre site doit comporter au moins 50 % de blanc. Le reste est à partager en 80 % d'une couleur froide (pour le design général, l'interface, ...) et 20 % d'une couleur chaude, si possible (bien) contrastante, à utiliser pour la mise en évidence de certaines parties (titres des sections, nouveautés, ...).

Évitez les couleurs sombres (gris foncé, anthracite, noir) et les couleurs de fond flashy ou foncé, ce sont les couleurs très claires qui sont le mieux, ou le blanc.

Autre chose, une fois les deux couleurs du 80/20 choisies, rien ne vous empêche d'en dégager un nuancier. Une proportion de 4 + 2 parait bonne, car après il faut savoir doser les teintes choisies pour que, d'une part, l'interface soit assez diversifiée sans non plus s'égarer en déclinaisons hasardeuses ; et d'autre part, les points forts doivent être mis en évidence de la façon la plus claire possible, pour que l'info importante ne se retrouve pas 'noyée' au milieu d'autres, moins importantes.

#cccc99		#ffffcc		#ffff33		#ccffcc		#9999cc
#666633		#cccc99		#ffcc00		#99cc99		#3333cc
	#ff9900		#00ffff		#ffccff		#ff9999		#009999
	#ff0000		#00cccc		#ff00ff		#cc0000		#003333
#999999		#330033		#996600		#ccccff		#000000
#ff9900		#cc0000		#ffcc33		#ffcc00		#ff6600

Ce tableau n'est pas exhaustif, mais en recoupant certaines lignes et colonnes ET en modifiant certains codes hexa, vous devriez pouvoir créer quelques nuanciers intéressants... Les valeurs hexadécimales utilisées sont 'pleines', à savoir 00, 33, 66, 99, cc, ff, soit 0, 20, 40, 60, 80 et 100 %, mais comme il y a 16 caractères, les combinaisons peuvent être plus variées.

Dans les couleurs de la version 4 de ce site (actuellement nous sommes à la 7), le bleu avait pour valeur #0099FF, le violet #463557, et le orange, le code #ff9d03, ce qui est déjà moins 'rond', tout en étant assez proche du #ff9900 du tableau ci-dessus.

Maintenant, c'est à vous de bidouiller avec vos couleurs