Couleur du texte
Passons maintenant au vaste sujet de la couleur.
Comment cela, « vaste » ?
Vous connaissez déjà la propriété qui permet de modifier la couleur du texte : il s'agit de color. Nous allons nous intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs.
La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (in english, of course).
Le seul défaut de cette méthode est qu'il n'existe que seize couleurs dites « standard ». D'autres couleurs officieuses existent mais, comme elles ne fonctionneront pas forcément de la même manière sur tous les navigateurs, je vais éviter de vous les montrer.
La figure suivante vous montre les seize couleurs que vous pouvez utiliser en tapant simplement leur nom.
Les seize noms de couleurs utilisables en CSS
Vous pouvez les apprendre par cœur si cela vous chante, en plus cela vous fera réviser votre anglais.
Pour passer tous les titres en marron, on peut donc écrire :
h1 { color: maroon; } |
Vous trouverez le résultat à la figure suivante.
Le titre est écrit en marron
Seize couleurs, c'est quand même un peu limite quand on sait que la plupart des écrans peuvent en afficher seize millions.
D'un autre côté, remarquez, s'il avait fallu donner un nom à chacune des seize millions de couleurs…
Heureusement, il existe en CSS plusieurs façons de choisir une couleur parmi toutes celles qui existent. La première que je vais vous montrer est la notation hexadécimale. Elle est couramment utilisée sur le Web mais il existe aussi une autre méthode que nous verrons plus loin.
Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une couleur.
On doit toujours commencer par écrire un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers indiquent une quantité de rouge, les deux suivants une quantité de vert et les deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut.
Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais maintenant, ne me demandez pas quelle est la combinaison qui produit de l'orange couleur « coucher de soleil », je n'en sais strictement rien.
Certains logiciels de dessin, comme Photoshop, Gimp et Paint.NET, vous indiquent les couleurs en hexadécimal. Il vous est alors facile de copier-coller le code hexadécimal d'une couleur dans votre fichier CSS.
Voici par exemple comment on fait pour appliquer aux paragraphes la couleur blanche en hexadécimal :
p { color: #FFFFFF; } |
Notez qu'il existe une notation raccourcie : on peut écrire une couleur avec seulement trois caractères. Par exemple : #FA3 équivaut à écrire #FFAA33.
Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en « RGB ». Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert et de bleu.
Encore cette histoire tordue de quantités de rouge-vert-bleu ?
Oui mais là, vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel de dessin tout simple comme Paint, vous pouvez trouver la couleur que vous désirez. Voici la marche à suivre :
p { color: rgb(240,96,204); } |
Modification des couleurs sous Paint
Sélection d'une couleur dans Paint
Comme vous avez pu le constater dans l'exemple, pour utiliser la méthode RGB, il faut taper rgb(Rouge, Vert, Bleu) en remplaçant « Rouge, Vert, Bleu » par les nombres correspondants. Pour information, ces quantités sont toujours comprises entre 0 et 255.
Je vous conseille un petit logiciel tout simple, gratuit et en français, réalisé par Benjamin Chartier, précisément conçu pour choisir vos couleurs. Nul doute qu'il vous sera très utile pour vous aider à choisir vos couleurs. Ce logiciel s'appelle « La boîte à couleurs » (figure suivante).
Comme vous pouvez le voir, il comporte plusieurs onglets. Je vous recommande de rester sur le premier (RVB) ou d'aller dans l'onglet Visuel. Les autres ne nous concernent pas. Évitez en particulier l'onglet Nom, qui propose des noms de couleurs parfois invalides (je vous rappelle qu'il existe seulement seize noms de couleurs « standard »).
Vous pouvez récupérer en bas à droite le numéro de la couleur en hexadécimal (le numéro commence toujours par un #) ou encore recopier les valeurs de Rouge-Vert-Bleu (RVB) dans le CSS.
Enfin, et c'est certainement la fonctionnalité la plus intéressante du logiciel, vous pouvez utiliser la pipette en haut à droite pour récupérer n'importe quelle couleur s'affichant sur votre écran !
Amusez-vous bien !
Créé avec HelpNDoc Personal Edition: Générateur complet d'aides multi-formats