COULEURS WEB

Hors usage d'images, les couleurs utilisées dans les pages web peuvent être définies de plusieurs manières, à l'aide de notations appliquées au contenu des balises HTML ou tags.
Les codes utilisés sont:
- notation hexadécimale
- RGB
- noms anglais correspondants; la liste en est toutefois limitée.

Syntaxe globale

Exemple

Les navigateurs affichent les police de caractères de ce paragraphe avec une couleur de code hexadécimal #222222 (variante de gris).

Code HTML

<p style="color:#222222">Les navigateurs affichent les police de caractères de ce paragraphe avec une couleur de <strong>code hexadécimal</strong> #222222 (variante de gris).</p>

Si vous voulez appliquer ce style à tous vos paragraphes, il faut l'indiquer dans votre feuille de style:

Code CSS

p {
color:#222222
}
strong /*couleur noire et police grasse pour le contenu des balises strong*/{
color: black;
}

Il n'est alors plus nécessaire de le préciser dans le code HTML de la page. La feuille de style (CSS) permet de changer rapidement, en une seule opération, la couleur de police de tous vos paragraphes. Pour ce faire, il vous faut changer uniquement le code hexadécimal de la couleur qui leur est attribué.

Class, effets ponctuels

Le bon usage W3C demande que, sauf cas ponctuels, les styles soient placés dans la feuille de style (CSS) et non dans le code HTML. Lorsqu'un style particulier s'applique à un certain type de paragraphes (par exemple), il est possible de personnaliser ces paragraphes particuliers dans la feuille de style en leur attribuant une "classe", de cette manière:

Exemple

Le bon usage W3C demande que, sauf cas ponctuels, les styles soient placés dans la feuille de style (CSS) et non dans le code HTML.

Code HTML

<p class="rouge">Le bon usage W3C demande que, sauf cas ponctuels, les styles soient placés dans la feuille de style (CSS) et non dans le code HTML.</p>

Code CSS

.rouge {
    color:red;
    background-color: gold
}

Il ne faut pas oublier le #; sinon, il ne se passera rien ; color et background-color peuvent être appliqués à tous les tags (balises) HTML qui le permettent. Entre les deux accolades, chacune des lignes doit se terminer par un point-virgule à l'exception de la dernière ligne avant l'accolade finale. L'oubli d'un point-virgule à la fin d'une ligne intermédiaire provoque des dysfonctionnements.

L'utilisation d'un éditeur de texte dit "à coloration syntaxique" permet d'éviter une bonne partie de ces pièges car l'oubli du point-virgule se repère immédiatement grâce aux changements de coloration du code. Chacun aura ses préférences en ce choix. Scite (logiciel libre Windows/Linux) demande quelques petits efforts dans sa configuration manuelle... mais tout cela est documenté.

Aller plus loin

Palettes

Des codes des couleurs hexadécimales sont proposés sur de nombreuses palettes en ligne. La liste proposée n'est absolument pas exhaustive.

Une palette sans code hexadécimal: cette palette comporte les 139 nuances qu'il est possible d'indiquer par un nom anglais.
Palette de couleurs: hexadécimal, RVB, CMJN,TSL (lien Wikipédia)]]

Colozilla (Firefox, Chrome)

Pour installer Colorzilla, un add-ons ou extensions (lien externe) pour Firefox ; ouvrez le navigateur, allez à :
Outils >>> Modules complémentaires

Dans la boîte qui s'ouvre, cliquez sur "Catalogue" puis sur "Parcourir tous les modules complémentaires".
La partie droite, à l'ouverture de la page, est positionnée sur "tous les modules" ; si ce n'est le cas, vous cliquez sur la flèche et sélectionnez "tous les modules".
La partie gauche, à l'ouverture de la page, est positionnée sur "recherche de modules" ; dans cette partie, vous tapez "Colorzilla" puis, réponse de la requête obtenue, vous cliquez sur "ajouter à Firefox"
Vous laissez faire jusqu'à ce que le bouton "installer" soit actif sans vous préoccuper des avertissements de sécurité (dans ce cas, vous pouvez ne pas en tenir compte). L'installation démarre puis vous demande de redémarrer Firefox.
Firefox ouvert, regardez en bas à gauche ; vous y verrez un petite pipette. Vous cliquez sur la pipette ; ceci transforme votre curseur flèche en curseur croix. Vous pouvez alors vous promener sur tout la surface de la fenêtre en cours de Firefox.
regardez la barre d'état de Colorzilla; vous y verrez défiler tous les codes hexadécimaux des pixels sur lesquels vous passez. D'autre part, dans le petit rectangle de la pipette, vous pouvez contrôler l'état de la teinte en cours. Lorsque celle-ci vous convient, vous ne bougez plus la souris et vous cliquez gauche. Ceci a pour effet d'enregistrer le code de la couleur en cours dans le presse-papier du système d'exploitation. Vous pouvez choisir le code RGB ou le codes hexadécimal; ceci fait, vous pouvez alors coller le code dans votre document HTML.
Vous pouvez également relever le code hexadécimal de chaque couleur en passant la pipette de Colorzilla sur un nuancier en ligne.

lien direct add-on Mozilla Colorzilla (lien externe)

Vous pouvez parfaire votre connaissance de la codification des couleurs en HTML en tapant le mot clé "couleurs sécuritaires" dans votre navigateur internet.

Couleurs de test

En local, il peut être intéressant de contrôler, par l'ajout de "background-color" (que vous pouvez toujours supprimer après), l'emplacement de vos DIV et autres blocs HTML. Ceci permet de retrouver plus facilement certaines erreurs de positionnements liées au "float-left" et autres réjouissances du positionnement CSS.
Les noms de couleurs en anglais, green, ou blue, yellow, brown, black, white, violet, pink..., sont plus explicites que les notations hexadécimales ou RGB.
Le résultat visuel peut paraître repoussant mais, dans ce cas, notre but n'est pas esthétique ; il est de trouver, par l'usage de ces background-color, où se situe l'erreur de positionnement CSS qui est alors beaucoup plus facilement repérable.

Autres exemples d'utilisation du background

Palettes agave

Depuis Synaptic, vous pouvez installer un logiciel assez sympathique, Agave, qui, lui aussi pourra vous être un agréable compagnon de route en cet univers de la couleur hexadécimale.
Les palettes d'Agave sont des fichiers textes éditables au format Gimp Palette situés dans le répertoire

/usr/share/agave/palettes

Attention toutefois à un seul petit détail : vous n'avez pas de droits utilisateurs sur ce répertoire ; la solution vous est donnée au chapitre "3.1.2. Palettes" de l'aide (en anglais) d'Agave:
"Your palette file should be saved with a .gpl extension and saved in home directory at .local/share/agave/palettes/. If your file is well-formed, Agave will load your custom palette next time you restart the application."

Votre palette personnalisée (écrite sans formatage depuis un éditeur de texte de base) doit être enregistrée avec l'extension .gpl dans le répertoire

.local/share/agave/palettes/

de votre /home. Il vous faut avoir coché l'option afficher les fichiers cachés dans Nautilus (Affichage >>> afficher les fichiers cachés).

Vous pouvez également récupérer les palettes de Colorzilla stockées dans votre profil Firefox:

.mozilla/firefox/profiles/xxxxxxxxxxxxxxx/colorzilla/palettes

et les copier dans le répertoire d'agave signalé précédemment.

palettes Gimp

Il est tout aussi simple d'importer, par copier-coller, les palettes de Gimp dans le répertoire Agave de votre home en suivant la même procédure.

Emplacement

/usr/share/gimp/2.0/palettes

Exemple de palette Gimp (.gpl)

GIMP Palette
Name: Default
#
255   0   0	Red
255   0 255	Magenta
  0   0 255	Blue
  0 255 255	Cyan
  0 255   0	Green
255 255   0	Yellow
127   0   0	Dark Red
127   0 127	Dark Magenta
  0   0 127	Dark Blue
  0 127 127	Dark Cyan
  0 127   0	Dark Green
130 127   0	Dark Yellow
  0   0   0	Black
 25  25  25	Gray 10%
 51  51  51	Gray 20%
 76  76  76	Gray 30%
102 102 102	Gray 40%
127 127 127	Gray 50%
153 153 153	Gray 60%
178 178 178	Gray 70%
204 204 204	Gray 80%
229 229 229	Gray 90%
255 255 255	White

Commentaires

Le fichier texte est composé du code décimal RGB (red green blue) ou, en français, RVB (rouge, vert, bleu) suivi du nom anglais de la couleur.

Pour chacune des 3 couleurs primaires (qui permettent de créer toutes les nuances possibles, y compris un "blanc" théorique), les valeurs décimales sont échelonnées de 0 à 255. Il existe divers convertisseurs consultables en ligne ; ceux-ci permettent de connaître ou de convertir le code RGB ou hexadécimal de chacune des couleurs.

255 0 0 pour du rouge
0 255 0 pour du vert
0 0 255 pour du bleu
255 255 255 pour le blanc
0 0 0 pour le noir (aucune couleur)

Photofiltre

Sous Ms Windows, parmi de nombreuses autres fonctions, Photofiltre (lien externe) permet, grâce à un plugin (lien externe), d'obtenir très rapidement un dégradé de couleurs éventuellement réutilisable comme palette (par inclusion de l'image dans une page HTML suivie d'un passage de la pipette de Colorzilla sur les différentes zones colorées ; à ce stade, nous sommes en plein bricolage artisanal et laboratoire expérimental) :

Dans le menu de Photofiltre, allez à
Filtre >>> Couleur >>> Dégradé

Photofiltre fonctionne plus ou moins correctement sous Wine (lien externe); Wine n'est ni payant ni un émulateur Windows ainsi qu'il l'est dit d'une manière erronée dans la FAQ de Photofiltre.
Photofiltre est un freeware ou gratuiciel et non un logiciel libre. Un logiciel libre est distribué avec une licence GNU ou dérivée qui permet, notamment, d'accéder à son code source pour le modifier. Un freeware est un logiciel privateur ou commercial. L'accès à, et la modification de son code source sont des délits au regard de la législation relative à la propriété intellectuelle.

Sous Wine, il peut arriver que Photofiltre se plante régulièrement si vous travaillez simultanément avec Firefox. Enregistrez donc très souvent votre travail ou évitez d'ouvrir Firefox en même temps que Photofiltre.