Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

14.11.2008

Appliquer des couleurs et en comprendre les codes

Sur votre télévision, les couleurs sont divisées en trois primaires rouge, vert et bleu. Vous le savez depuis que vous regardiez vos dessins animés préférés d'un peu trop près sur l'écran cathodique parental.

Vous pouviez distinguer les gros points au sein desquels les primaires s'additionnaient pour composer la couleur souhaitée. Aujourd'hui, avec les cristaux liquides, le plasma, inutile de baver dessus, vous ne verrez rien. Pour autant, il y a bien les mêmes composantes.

Et vous le savez aussi depuis que vous avez tenté de régler une couleur pour un graphique, un arrière-plan de tableau dans un tableur, ou de paragraphe dans un traitement de texte. Si les couleurs proposées ne vous conviennent pas, il est toujours possible de la régler vous même. Vous indiquez les proportions de rouge, de vert, et de bleu en glissant dans une palette, une roue chromatique, ou en indiquant une valeur comprise entre 0 et 255. Mine de rien cela fait 256 valeurs par composante, et donc 16 777 216 combinaisons possibles.

La plupart des machines actuelles sont capables de les afficher distinctement, alors que vous n'arriverez pas nécesairement à les distinguer vous-même, mais cela n'est pas toujours le cas. Les graphistes et concepteurs multimédia sont bien obligés de tenir compte des capacités du dernier maillon de la chaîne de diffusion et arbitrent en permanence entre ce qu'ils souhaitent, et ce que peut probablement proposer votre écran. La même image publicitaire n'aura pas la même composition pour la télévision, le web et le web via téléphone mobile. Sur internet, il a longtemps été conseillé d'utiliser la "palette web" composée de 216 couleurs qualifiées de "sécuritaires" auxquelles on ajoutait le noir, le blanc et 6 niveaux de gris.

Pour indiquer une couleur sur le web, vous devez utiliser un code HTML. Il en existe deux sortes.

Il existe des codes couleur HTML en texte

Ils sont en anglais bien sûr, mais ils ne se limitent pas aux 16 couleurs suivantes :

aqua [ • bleu-vert] • 
black [ • noir] • 
blue [ • bleu] • 
fuchsia [ • fuschia] • 
gray [ • gris] • 
green [ • vert] • 
lime [ • citron vert] • 
maroon [ • marron] • 
navy [ • bleu marine] • 
olive [ • vert olive] • 
purple [ • violet] • 
red [ • rouge] • 
silver [ • argent] • 
teal [ • bleu-vert] • 
white [ • blanc] • 
yellow [ • [jaune] • 

Vous trouverez une liste très fournie dans les pages couleurs d'Henri Ruch.


Plus généralement, les couleurs sont codées avec des chiffres

Au lieu de color="orchid" on aura color="#DA70D6".
"DA" représente la part de rouge, "70" la part de vert, et "D6" la part de bleu. Ces codes bizarres sont dus au fait que l'on compte en base hexadécimale (16) et non en decimale. À notre niveau, cela permet de donner 256 valeurs en deux caractères au lieu des 100 possibles en base 10.

Comment mettre de la couleur avec l'éditeur Haut&Fort ?

Il y a la méthode douce avec ses variantes, pour avoir plus de couleurs :
• Dans l'éditeur de note, sélectionner du texte
• Cliquer sur "Choisir la couleur du texte" ou "Choisir la couleur de surlignage"
• Dans la palette qui s'affiche, choisir une couleur.

HF_couleur_base.jpg


• Dans la palette qui s'affiche, cliquer sur "Plus de couleurs".
• Dans chacun des onglets, vous verrez le code HTML s'afficher et suivre vos réglages.
• Vous pouvez aussi directement taper un code HTML que vous connaissez, sans effacer le #
HF_couleur_nuancier.jpg• Dans l'onglet "Nuancier" choisir une couleur dans la zone principale, et régler sa luminosité dans la zone de droite.
HF_couleur_palette.jpg• Dans l'onglet "Palette" choisir une couleur parmi les 216 "sécuritaires". Il n'y a pas les gris.
HF_couleur_noms.jpg• Dans l'onglet "Nom" choisir une couleur dans la palette. Tentez de mémoriser les noms qui vous intéressent, vous ne les retrouverez pas dans le code HTML de votre note

Il y a la méthode dure :
• Dans l'éditeur de note, basculer en mode HTML
• Répérer le texte à mettre en couleur et se placer devant.
• Écrire le code <span style="color: #DA70D6;"> où #DA70D6 est bien le code HTML de la couleur
• Se placer à la fin du texte à mettre en couleur
• Écrire le code </span>, on obtiendra quelque chose comme
<span style="color: #DA70D6;">Orchidée</span>
• Cliquer sur [Mettre à jour]
• Dans l'éditeur de note, le texte est bien en couleur. On obtiendra quelque chose comme Orchidée

Vous pourriez utiliser la syntaxe HTML standard
<font color="#DA70D6">Orchidée</font>, celle ci serait reconvertie automatiquement par Haut&Fort. C'est normal, les notes de votre blog suivant déjà une "feuille de style" la codification est différente.


Il y a une méthode intermédiaire :
• Dans l'éditeur de note, sélectionner du texte
• Cliquer sur "Choisir la couleur du texte" ou "Choisir la couleur de surlignage"
• Dans la palette qui s'affiche, choisir la couleur sous le noir, c'est ce rouge foncé là.
• Dans l'éditeur de note, basculer en mode HTML
• Répérer le texte mis en couleur, on doit avoir quelque chose comme :
<span style="color: #800000;">Lorem ipsum</span>
• Changer la valeur 800000 pour celle qui vous intéresse
• Cliquer sur [Mettre à jour]

Ce détour vers les codes HTML de couleur me paraissait nécessaire avant d'aborder la vraie question : l'harmonie chromatique.

12:46 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : blog, html, couleur | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

Bonsoir Gee Mee,

Vous me disiez que vous étiez loin d'être un pro de la technique, mais je vois quand même que vous êtes assez balèze !!!!

Ne soyez pas trop modeste Gee Mee !!!!

En tout cas, merci pour vos aides toujours aussi détaillées et utiles !!!!

Bon weekend

Écrit par : Gilles | 14.11.2008

Répondre à ce commentaire

Gilles : votre commentaire me fait plaisir, mais je ne pense pas être aussi balèze que vous croyez me voir.
Cela étant, je suis bien plus heureux de savoir que mes notes peuvent vous être utiles.
Bon week-end à vous.

Écrit par : Gee Mee | 15.11.2008

Répondre à ce commentaire

Les commentaires sont fermés.