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.

08.05.2009

Voir ses couleurs en grand

Ça y est, vous êtes décidé(e) à personnaliser les couleurs de votre blog ? Vous avez pris soin de lire la note de Gee Mee appliquer des couleurs et en comprendre les codes ? Vous avez tout compris, et vous passez à l'action... mais voilà, la couleur que vous avez sélectionnée dans sa petite case vous déçoit une fois appliquée à une plus grande surface !

Voyons, ne vous arrachez pas les cheveux, j'ai une solution. Enfin, pas moi, mais le petit génie qui a eu cette idée formidable : faire afficher une couleur dans une pleine page web !

Pour cela vous devez avoir noté le code hexadécimal de cette couleur.

Si ce mot vous semble barbare, c'est que vous n'avez pas tout à fait compris la note citée en préambule (très riche, il est vrai : on peut avoir du mal à tout capter !), alors je récapitule le strict nécessaire :

Une couleur peut s'écrire de différentes manières :
- en texte, html (ex. "Red") ou html étendu pour aller au-delà des 16 couleurs de base (ex. "Tomato"),
- en valeurs (ex. R : 178, V : 34, B : 34, écrit 178.34.34),
- ou en hexadécimal (le barbare...), c'est-à-dire avec 3 valeurs chiffrés en base 16 et précédées d'un dièse (ex. #daa520 ou #DAA520).

Cela tombe bien, car c'est justement en hexadécimal que la palette Hautetfort nomme les couleurs, et c'est le code dont vous aurez besoin si vous voulez modifier le template.

Si vous avez repéré quelque part une couleur en RVB voici un petit convertisseur RVB / hexadécimal très pratique (il fonctionne dans les deux sens).

 

Vous l'avez ? Maintenant, cliquez ici pour ouvrir la fenêtre de cet outil magique.

J'ai choisi cette couleur à l'ouverture pour qu'elle s'accorde avec le blog Gee Mee ;-)

C'est bien beau, mais cela n'affiche pas VOTRE couleur. Il reste une petite manip'.

 

Allez au bout de la barre d'adresse et remplacez mon "ebc276" par le code de votre couleur sans le #.

Image 3.png

Maintenant vous pouvez vérifier si elle vous plaît VRAIMENT. De quoi en prendre plein les mirettes...

Elle vous plaît tant que cela ? Alors pensez-y, si vous n'en pouvez plus de l'accumulation de fenêtres sur votre écran et que vous avez besoin d'une soudaine pause relaxante : élargissez la fenêtre et contemplez en plein écran l'élue de votre cœur (je parle toujours de couleur, là) !

Une prochaine fois je vous présenterai un outil intéressant pour marier votre couleur préférée avec d'autres et créer une charte de couleur pour votre blog.

10:30 Écrit par Gee Mee dans Boîte à outils | Lien permanent | Commentaires (0) | Tags : couleur, hexadécimal, blog | |  del.icio.us | | Digg! Digg |  Facebook

26.11.2008

Retrouver le code d'une couleur vue sur le web, et ailleurs.

Avouez-le, malgré vos efforts acharnés à maîtriser les parfaits dosages de rouge de vert et de bleu, retrouver la couleur qui vous plaît vous est aussi facile que si vous deviez recomposer votre parfum vous-même. Ce serait tellement plus facile de les piquer ici et là...

Il n'est pas donné à tout le monde de distinguer correctement les couleurs et de savoir les restituer. Aussi, les outils qui permettent de faire des prélèvements rapides et sans douleur sont les bienvenus. Vous connaissez cet outil, vous l'avez vu dans un logiciel de retouche d'image, et déjà dans MS Paint vous l'aviez rencontré sous le nom de "pipette".

Mais quand on a besoin de seulement capturer une couleur pour en obtenir le code, lancer Gimp ou Photoshop paraît bien disproportionné. Des outils qui ne font que cela mais qui le font bien, il en existe de nombreux. J'ai personnellement adopté la solution de Benjamin Chartier.

La boîte à couleurs (v1.6.15)

C'est un logiciel gratuit que je vous incite à retrouver sur le site Pourpre que nous avons déjà évoqué. Cet outil est aussi simple que puissant, et vous permettra la capture facile et indolore des couleurs les plus sauvages et indomptables.


Vous pourrez alors coder en :
• RVB (Rouge Vert Bleu)
• TLS (teinte / luminosité / saturation)
• TSV (teinte / saturation / valeur)
• CMJ (cyan / magenta / jaune)
• CMJN (cyan / magenta / jaune / noir)

Et pour les littéraires, ou les personnes seulement lassées du côté froid des valeurs arithmétiques, on peut utiliser des noms, des vrais, et notamment ceux de la palette de Chroma. Les accros des références d'imprimerie trouveront même des correspondances Pantone (je ne rentre pas dans le débat de leur pertinence...).

La_boite_a_couleurs_nom.jpg

Trop facile ?

Faites donc vous-même votre nuancier préféré en créant un fichier texte avec un nom et un code couleur html par ligne. Enregistré dans le répertoire ColorNames du répertoire d'installation de LaBoiteACouleurs, il sera reconnu et utilisable dans l'onglet "Nom".

P.S. : Sans vouloir jouer les pudibonds, Pourpre diffuse une publicité pour une exposition qui peut en faire rougir quelques uns. Sachez-le avant d'y aller avec des yeux innocents.

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

19.11.2008

Pour apporter les couleurs du monde, à la portée du monde des couleurs

Nous avons commencé à voir comment appliquer une couleur à un texte, et à une cellule de tableau, mais nous avons négligé une étape essentielle : savoir choisir une couleur.

Il est d'usage de considérer que les goûts et les couleurs ne se discutent pas. Un usage qui ne vaut rien et que nous nous abstenons de respecter à chaque occasion. Si nous n'exprimons pas forcément ce que nous pensons des harmonies des autres, nous n'en pensons pas moins. Soyons honnête et admettons que les couleurs des autres, comme leurs goûts, sont souvent discutables.

D'ailleurs, les difficultés commencent quand nous cherchons à nommer les couleurs. La maîtrise du vocabulaire approprié ne s'improvise pas, et rares seront ceux qui réussiront à se sortir d'un débat autour du nom de ce vieux rose sans boire le calice jusqu'à la lie de vin.

Le site Pourpre.com peut nous aider sur ces deux points notamment.

Dans la rubrique "Chroma" nous trouvons plusieurs dictionnaires : alphabétique, chromatique par teinte ou par champs. Chaque couleur fait l'objet d'une fiche, et propose un code Html en hexadécimal. Il y est aussi question de qualificatifs comme "acidulé" par exemple.
Enfin, il existe un dictionnaire imaginaire qui vaut le détour à lui seul. Les internautes ont la possibilité de proposer une couleur, avec une définition toute personnelle. Certains abuseront de jeux de mots, joueront sur l'écriture du code ou feront preuve de poésie.
C'est un lieu magique dans lequel se retrouveront à leur aise les amoureux des mots comme des couleurs. De l'authentique "cuisse de nymphe" à l'imaginaire "nymphrose", vous en verrez des vertes et des pas mûres. Et même du Verlaine.

Chromafiltre vous aidera à trouver les accords.
C'est un outil en Flash qui vous permet de trouver des harmonies à partir d'une roue chromatique ou de gammes et d'effet recherché. Bien plus que des solutions toutes prêtes, vous y trouverez des méthodes qui vous aideront dans votre quête.

Pourpre.com
Ce site propose des articles consacrés à la couleur: le phénomène physique, la perception des couleurs, la langue française et la couleur, des questions-réponses, un glossaire, une présentation des principaux modèles et nuanciers de couleurs, quelques jeux, une sélection de liens...

Extrait de la page d'accueil

 

10:36 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : blog, html, couleur, pourpre | |  del.icio.us | | Digg! Digg |  Facebook

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