Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

Dans ce chapitre on va se livrer à une vraie bataille avec la propriété CSS color et le choix et syntaxe des couleurs en CSS.

css-1 Introduction à la propriété CSS color

Cette propriété permet de spécifier la couleur de votre texte, ou celui affiché sur les contrôles de formulaires. Pour préciser la couleur avec cette propriété. Vous avez le choix entre les méthodes suivantes :

Les unités de couleur

Noms de couleur en anglais

Liste des couleurs standard

Les noms anglais des 16 couleurs de base qui ont été spécifiés dans la recommandation HTML version 3.2 :

white silver
gray black
red maroon
lime green
olive blue
navy fuchsia
purple aqua
teal yellow

Liste d'autres couleurs

aqua aquamarine
azure black
blue blueviolet
brown chocolate
cyan darkblue
darkgray darkorange
darkseagreen darkviolet
forestgreen fuchsia
gold gray
green greenyellow
lightblue lightgreen
lightgrey lightpink
lightseagreen teal
lightyellow lime
limegreen maroon
navy olive
orange pink
purple red
silver skyblue
slateblue snow
tomato turquoise
violet white
yellow yellowgreen

Les noms de couleurs ne sont pas sensibles à la casse. Ceci dit que le navigateur va interpréter de la même manière "RED" "red" "Red" etc. L'essentiel c'est d'éviter les fautes de frappe

Je vous conseille de vous servir des couleurs standard qui sont les plus sécurisées en la matière et d'éviter au maximum les autres couleurs. Car elles ne sont pas forcément interprétées de la même manière dans tous les navigateurs. Mais si vous n'êtes pas satisfait de ce nombre limité des couleurs standard. Vous devez envisager d'autres méthodes à savoir la notation hexadécimale ou RGB.

La notation RGB hexadécimale

Cette notation commence toujours par un dièse "#", suivi de six lettres ou chiffres arabes, allant respectivement de 0 à 9 et de A à F. Voici un exemple : #0233BC. Les deux premiers chiffres ou lettres indiquent une intensité de rouge, les deux suivant une intensité de vert et les deux derniers une intensité de bleu. En réunissant ces trois valeurs colorimétriques (rouge-vert-bleu) on obtient notre couleur.

Voici des exemples de couleurs avec la méthode hexadécimale :

Bleu #0000FF Rouge #FF0000
Vert #00FF00 Jaune #FFFF00
Blanc #FFFFFF Gris clair #C0C0C0
Violet #8000FF Noir #000000

Si les deux valeurs d'une paire se ressemblent, la notation peut être comprimée, exemples :
#aa1188 <==> #a18 de même pour #ff6699 <==> #f69 mais pour #aa12e8, elle ne peut pas être compressée en #a12e8. (La syntaxe hexadécimale comporte soit 3 ou 6 caractères précédés par un dièse "#").

Pour obtenir des couleurs plus précises et qui correspond à vos goûts personnels, l'utilisation d'un logiciel d'infographie comme Photoshop s'avère opportune.

La notation RGB hexadécimale est appelée ainsi. Car elle repose sur la base hexadécimale :

décimal

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

hexadécimal

0 1 2 3 4 5 6 7 8 9 A B C D E F

En passant dans chaque couple deux valeurs hexadécimales. On aura 256 intensités différentes des trois composantes RVB (16 x 16). Et puis en rassemblant les trois valeurs RVB, on aura 256 x 256 x 256 = 16.777.216 couleurs différentes.

La notation hexadécimale fonctionne de la même manière que la notation RVB. Du point de vue : principe de codage de couleurs (synthèse additive) et aussi du point de vue nombre total de couleurs définissables. D'ailleurs vous pouvez convertir une valeur hexadécimale en RVB et vice-versa.

La notation RGB décimale

Il y a une ressemblance frappante entre ces deux dernières méthodes. Toutes les deux reposent sur le principe de la synthèse additive des trois couleurs élémentaires (rouge-vert-bleu). RGB est l'abréviation de "red-green-blue" qui veut dire en français rouge-vert-bleu (RVB). Le principe de la méthode consiste à taper un nombre compris entre 0 et 255 (256 valeurs différentes) pour indiquer l'intensité des trois couleurs élémentaires. Voici un exemple : rgb(110,13,250).

La notation HSL (hue, saturation, luminance)

Elle n'est pas reconnue par Internet Explorer 6 et 7 ainsi qu'Opera. Par contre vous pouvez utiliser cette notation pour les navigateurs Firefox, Netscape, Mozilla, K-Meleon et Safari. La notation HSL consiste en trois valeurs :

Voir : Le codage TSL/HSL (Teinte, Saturation, Luminosité / Hue, Saturation, Luminance)

A titre d'exemple le rouge peut être exprimé de différentes manières :

Exprimer une couleur en XHTML et CSS

Les mentions de couleurs qu'on vient de voir peuvent être appliquées soit aux propriétés CSS : color, background-color et border-color, soit aux attributs XHTML. Je vais donner uniquement un exemple pour la propriété CSS color, car c'est elle uniquement qui se rapporte au sujet, et puis les attributs XHTML qui reçoivent pour valeur une couleur sont tous dépréciés et en voie d'abandon. Exemples :

.textRouge { /* classe qui permet d'appliquer une couleur rouge */ 
color: red;
}
h1, h2, p { /* titres h1, h2 et paragraphes en bleu avec notation hexadécimale */ 
color: #0000FF;
}
body { /* un id qui permet d'appliquer une couleur verte grâce à la méthode RGB */
color: rgb(0,255,0); 
}
.vert {
color: hsl(120,100%,100%); /* vert exprimé en mode HSL */
}

Les développeurs Web recourent généralement à des solutions logicielles, pour pouvoir choisir efficacement une couleur. C'est pour cette raison qu'on va évoquer certains outils très intéressants en la matière

Choisir une couleur grâces aux logiciels Photoshop, la boîte à couleurs et Paint

Photoshop

Grâce à ce merveilleux logiciel vous aurez la possibilité de trouver les couleurs de vos rêves Pour ce faire, ouvrez votre logiciel Photoshop, et faites apparaître le sélecteur de couleurs Adobe :

choisir une couleur pour la propriété CSS color par le sélecteur Adobe Photoshop

Tout d'abord cochez la case "Couleurs Web uniquement" pour n'afficher que des couleurs web sécurisées dans le champ de couleurs se trouvant à gauche. Ensuite choisissez une valeur dans le curseur de couleur indiqué par une flèche noire. Ce curseur de couleur permet de changer les valeurs (intensités) des composantes RVB, HSL ou LAB.

Dans le champ de couleurs à gauche, vous pouvez ajuster la couleur en jouant sur d'autres variables. Le petit anneau marqué par une flèche jaune indique la couleur courante que vous avez choisie. Maintenant il ne vous reste que de copier le code de la couleur.

Si vous voulez utiliser la notation hexadécimale prenez les valeurs entourées par le vert (n'oublier pas d'ajouter un dièse), dans cet exemple : #3366cc. Si vous optez pour la méthode RGB rassemblez les valeurs encadrées par le rouge. Dans notre exemple on aura : rgb(51,102,204). Enfin si le mode HSL vous intéresse (malgré sa compatibilité qui laisse désirer). Réunissez les valeurs se trouvant dans le cadre bleu. Comme vous pouvez le constater la première est exprimée en degrés, les deux autres valeurs sont exprimées en valeurs relatives. Dans notre exemple on aura : hsl(220,75%,80%). Utilisation :

<p style="color: #3366cc;">Notation hexadécimale : #3366cc</p>
<p style="color: rgb(51,102,204);">Notation RGB décimale : rgb(51,102,204)</p>
<p style="color: hsl(220,75%,80%);">Notation hSL : hsl(220,75%,80%)</p>

Notation hexadécimale : #3366cc

Notation RGB décimale : rgb(51,102,204)

Notation HSL : hsl(220,75%,80%)

Vous constatez que la couleur du troisième paragraphe diffère un peu des deux premières. Ceci peut être imputé au fait que la couleur rgb(51,102,204) (ou #3366cc) ne trouve pas un équivalent direct et exact dans le mode HSL. Car ce dernier permet de représenter uniquement :
360 (0-359) x 101 (0-100) x 101 (0-100) = 3672360 couleurs différentes.
Dans le cas où une couleur TrueColor (RGB) fait défaut dans le mode HSL, Photoshop choisit la couleur la plus proche d'elle.

Pour s'approfondir en l'utilisation du sélecteur de couleurs Adobe Photoshop : Choisir une couleur avec Photoshop

La boite à couleurs

La Boîte à couleurs (1.38 Mo) est un logiciel gratuit écrit pour Windows par Benjamin Chartier. Il permet d'obtenir une couleur par plusieurs méthodes dont RGB, notation hexadécimale, HSL et noms de couleurs. Voici ce à quoi elle a l'air la machine :

choisir une couleur pour la propriété CSS color par la boîte à couleurs

Tout d'abord choisissez le menu RVB et commencez à modifier les quantités du rouge-vert-bleu, notez que la valeur hexadécimale entourée par le rouge se mis à jour en même temps que vous changez les valeurs RVB, après avoir choisi une couleur, il ne vous reste plus qu'à copier soit les valeurs RGB ou le code hexadécimal. Vous pouvez même aller copier la valeur HSL (TLS) ou bien se renseigner sur le nom de la couleur exacte (si elle en a un) ou le nom le plus proche à la valeur RGB.

Ce logiciel offre en plus de ça une astuce vraiment originale : la pipette entourée par le vert. Cliquez sur cet outil et commencez à déplacer la souris sur l'écran tout en gardant votre logiciel ouvert, à chaque fois que la souris passe au-dessus d'un pixel de votre écran. La boîte prélève sa couleur, et bien sûr sa notation RGB, hexadécimale, HSL et nom L'avantage de cette méthode c'est que vous pouvez récupérer n'importe quelle couleur depuis votre écran.

Notez qu'il y a aussi un menu appelé "nom" qui sert à afficher les couleurs avec leurs noms respectifs, mais n'oubliez jamais qu'il y a seulement 16 couleurs dites "standard". Enfin si vous utilisez la pipette avec le menu "nom" vous obtiendrez les noms de couleurs qui se rapprochent à la couleur du pixel survolé par la souris. Ceci dit que vous allez rencontrer certaines couleurs qui n'ont pas une transcription nominale. Sinon on doit prévoir plus de 16 millions de noms de couleurs en langue française plus de ce qu'il y en de mots actuellement

Le logiciel Paint de Microsoft

Je vais pas m'attarder là-dessus. Mais sachez que vous pouvez exploiter le logiciel Paint installé par défaut dans le Windows. Au moins vous allez donner à ce logiciel largement méconnu une valeur d'usage

choisir une couleur pour la propriété CSS color par le sélecteur de couleurs Paint (Windows)

Pour accéder au programme Paint : menu démarrer > tous les programmes > accessoires et enfin cliquez sur Paint ou bien copier l'adresse suivante dans la barre d'adresse : C:\WINDOWS\system32\mspaint.exe, ou bien taper mspaint.exe dans l'invite des commandes (MS-DOS) ou dans la commande "exécuter" qui se trouve dans le menu démarrer. Pour faire apparaître le sélecteur Paint : menu Couleurs > Modifier les couleurs...

Pour finir, donner libre cour à votre imagination en jouant avec ce petit joujou et lorsque vous tomber sur une couleur répondant à vos attentes. Copier le code RGB (Rouge-Vert-bleu) ou HSL (Teinte-saturation-luminosité). Pour des raisons d'exhaustivité en l'utilisation du sélecteur de couleurs Paint visitez la section : Choisir une couleur grâce au sélecteur de couleurs Paint (Microsoft Windows).

Conversion codage Hexadécimal - RVB

On sait bien que la mention hexadécimale est composée de trois valeurs indiquant chacune l'intensité des trois couleurs élémentaires. Chacune de ces valeurs sont exprimées en deux lettres ou chiffres allant respectivement de 0 à 9 et de A à F. Pour trouver l'intensité de ces couleurs dans la méthode RGB qui fait appel à un nombre compris entre 0 et 255 on procède ainsi :

On prend une paire de deux caractères d'une notation hexadécimale. Puis on lui applique le traitement suivant pour trouver son équivalent dans le code RGB : 16 x (premier caractère) + 1 x (second caractère). On a par exemple : #993399. Si on veut traduire l'intensité du rouge en RGB on aura :
(16 x 9) + (1 x 9) = 153. On fait la même chose pour les deux autres paires et on les rassemble pour obtenir la mention RGB de la même couleur qui, auparavant exprimée en hexadécimal.
Donc #993399 ==> rgb(153,51,153).

N'oubliez pas que la notation #rrggbb accepte aussi des lettres allant de A à F, dans ce cas A correspond à 10, B à 11, C à 12, D à 13, E à 14 et F à 15. Alors si on veut convertir la mention hexadécimale suivante : #ccff99 on aura :

Ce qui fait que #ccff99 = rgb(204,255,153).

Convertir une valeur hexadécimale en RGB (RVB)

Champs d'application de la propriété CSS color

La propriété CSS color peut être appliquée sur le texte d'un élément XHTML (p, h1, ul, table etc.), et même sur le texte affiché dans les contrôles de formulaires :

Dans le chapitre suivant on va continuer avec les propriétés CSS d'alignement de texte : text-align et vertical-align.

Aidez la Communauté des Étudiants !