Dans une page Web, la configuration des couleurs permet de :

• colorer un texte (texte simple dans la page, titre de la page, texte d'un lien, etc.)
• colorer l'arrière plan d'un élément (couleur de fond de la page, arrière plan d'un paragraphe ou d'une cellule de tableau, etc.)
• colorer une bordure (bordure de paragraphe, quadrillage d'un tableau, encadrement d'une image, etc.)

Nous allons voir ici les différentes manières d'indiquer une couleur dans le code HTML d'une page web.

En HTML, pour choisir une couleur nous disposons de 3 couleurs de base : le rouge, le vert et le bleu. Chaque couleur de base peut prendre une valeur entre 0 et 255, ce qui nous permet d'obtenir 256³ couleurs différentes (soit un peu plus de 16 millions de couleurs).

Pour tester l'étendue des 16 milions de couleurs, configurez la couleur du rectangle ci-dessus en jouant sur les 3 jauges suivantes :

Jauge rouge (de 0 à 255) :

Jauge vert (de 0 à 255) :

Jauge bleu (de 0 à 255) :

Chacune des 16 milions de couleurs est représentée par la valeur des 3 couleurs de base.

En codage RVB (RVB signifiant Rouge Vert Bleu), on précise la valeur des 3 couleurs en décimal (entre 0 et 255).

Exemple : (255, 128, 0) correspond à la notation RVB de la couleur orange.

En codage hexadécimal, on précise la valeur des 3 couleurs en base 16 sur 2 chiffres (entre 00 et FF) précédées d'un #.

Exemple : #FF8000 correspond au codage hexadécimal de cette même couleur orange.

Comme nous venons de le voir, une couleur est définie par une valeur numérique : il y a alors un peu plus de 16 millions de possibilités. Mais en HTML les couleurs les plus courantes sont également définies par un nom normalisé en toute lettre (en plus de la valeur numérique). Il existe environ 140 noms de couleurs prédéfinis utilisables en HTML.

Voici les noms prédéfinis des 16 premières couleurs utilisables en HTML avec tous les navigateurs :

Et voici quelques autres exemples de couleurs prédéfinies parmis les plus courantes :

Remarques :

• les couleurs prédéfinies Aqua et Cyan correspondent à la même couleur de code hexadécimal #00FFFF
• les couleurs prédéfinies Fuchsia et Magenta correspondent à la même couleur de code hexadécimal #FF00FF

Pour découvrir d'autres noms de couleurs prédéfinis cliquez ici. Attention tout de même, certains navigateurs n'acceptent qu'un nombre limité de noms prédéfinis de couleurs.

Pour préciser une couleur dans une balise HTML on utilise la propriété CSS "color" en indiquant la couleur dans un des 3 formats :

• soit en codage RVB (en utilisant la fontion rgb)
• soit en codage hexadécimal (précédé d'un signe #)
• soit en utilisant un nom de couleur prédéfini

Exemple avec la balise <span> qui permet de colorer certains mots dans une phrase :

 

Configuration des couleurs dans un paragraphe

Au niveau de la balise de paragraphe <p>, on peut colorer soit le texte, soit l'arrière plan, soit la bordure. Voici quelques exemples des possibilités de colorisation d'un paragraphe.

On commence par un paragraphe de base, sans style particulier. Il s'agit d'un texte encadré par les balises <p> et </p> :

<p>Ceci est un paragraphe de texte. Gr&acirc;ce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.</p>

Voici le résultat affiché dans le navigateur :

Ceci est un paragraphe de texte. Grâce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.

La propriété CSS color dans la balise <p> permet de colorer tout le texte du paragraphe :

<p style="color:#E549C8">Ceci est un paragraphe de texte. Gr&acirc;ce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.</p>

Voici le résultat affiché dans le navigateur :

Ceci est un paragraphe de texte. Grâce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.

La propriété CSS background-color dans la balise <p> permet de colorer la couleur de fond du paragraphe :

<p style="background-color:#66FFFF">Ceci est un paragraphe de texte. Gr&acirc;ce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.</p>

Voici le résultat affiché dans le navigateur :

Ceci est un paragraphe de texte. Grâce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.

Enfin, la propriété CSS border-color dans la balise <p> (associée à la propriété border) permet de colorer la bordure du paragraphe :

<p style="border:solid;border-color:#6633FF;">Ceci est un paragraphe de texte. Gr&acirc;ce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.</p>

Voici le résultat affiché dans le navigateur :

Ceci est un paragraphe de texte. Grâce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.

On peut très bien cumuler plusieurs propriétés CSS pour une même balise <p> afin de personnaliser à la fois la couleur du texte, la couleur du fond, le type de bordure ainsi que la couleur de la bordure du paragraphe. Exemple :

<p style="color:#CCFF66; background-color:#000066; border:double; border-color:#FF33CC">Ceci est un paragraphe de texte. Gr&acirc;ce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.</p>

Remarque : pour indiquer plusieurs propriétés CSS dans l'attibut style d'une balise il faut les séparer par un point-virgule.

Voici le résultat affiché dans le navigateur :

Ceci est un paragraphe de texte. Grâce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.

Les couleurs peuvent être exprimées en codage hexadécimal (comme dans l'exemple ci-dessus), en codage RVB, ou encore en utilisant un nom de couleur prédéfini. Voici un exemple qui utilise les 3 formats de couleur :

<p style="color:rgb(253, 53, 12); background-color:#C7FFB1; border:dashed; border-color:DodgerBlue">Ceci est un paragraphe de texte. Gr&acirc;ce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.</p>

Voici le résultat affiché dans le navigateur :

Ceci est un paragraphe de texte. Grâce aux couleurs on peut facilement le personnaliser pour le mettre en valeur. Il est possible de configurer la couleur du texte, la couleur du fond, ou encore la couleur de la bordure.

Les proprétés CSS de colorisation color, background-color et border-color que nous venons d'illustrer avec la balise de paragraphe <p> s'applique également dans une balise <div> ou encore dans un tableau <table>.

Configuration des couleurs dans un lien

Au niveau d'un lien, la configuration des couleurs permet de choisir la couleur du texte du lien, qui est par défaut affiché en bleu et souligné.

Commençons par un lien simple qui ouvre une nouvelle page web :

<a href="http://nsi.gecif.net/" target="_blank">Cliquez ici pour ouvrir nsi.gecif.net</a>

Voici le résultat affiché dans le navigateur :

Cliquez ici pour ouvrir nsi.gecif.net

Personnalisons la couleur du texte du lien avec la propriété CSS color appliquée dans la balise <a> :

<a style="color:#33CC00" href="http://nsi.gecif.net/" target="_blank">Cliquez ici pour ouvrir nsi.gecif.net</a>

Voici le résultat affiché dans le navigateur (le lien est en couleur, mais encore souligné) :

Cliquez ici pour ouvrir nsi.gecif.net

Pour supprimer le soulignement du lien on utilise la propriété CSS text-decoration :

<a style="color:#33CC00; text-decoration:none" href="http://nsi.gecif.net/" target="_blank">Cliquez ici pour ouvrir nsi.gecif.net</a>

Voici le résultat affiché dans le navigateur (le lien n'est plus souligné) :

Cliquez ici pour ouvrir nsi.gecif.net

Enfin, on peut également personnaliser la couleur du fond (background-color), le style de la bordure (border) et la couleur de la bordure (border-color), ainsi que la taille de la marge intérieure (padding) du lien dans la balise <a> :

<a style="color:rgb(195, 255, 170); text-decoration:none; background-color:#666666; border:dotted; border-color:red; padding:8px" href="http://nsi.gecif.net/" target="_blank">Cliquez ici pour ouvrir nsi.gecif.net</a>

Voici le résultat du lien personnalisé affiché dans le navigateur :

Cliquez ici pour ouvrir nsi.gecif.net

Configuration des couleurs autour d'une image

Au niveau d'une image, la configuration des couleurs permet de colorer la bordure afin d'encadrer l'image dans le but de la faire ressortir.

Voici une image de base, sans bordure, affichée grâce à la balise <img> :

<img src="chat.jpg">

Voici le résultat affiché dans le navigateur :

Configurons le style et la couleur de la bordure :

<img src="chat.jpg" style="border:solid; border-color:#CC3333">

Voici le résultat affiché dans le navigateur :

On peut également configurer une marge intérieure (padding) et une couleur de fond (background-color) :

<img src="chat.jpg" style="border:solid; border-color:#CC3333; padding:30px; background-color:#66CCFF">

Voici le résultat affiché dans le navigateur :

Voilà, vous savez désormais configurer toutes les couleurs afin de personnaliser vos pages web.