216 couleurs certifiées web pour personnaliser votre blog (code des couleurs)

Envie de changement? De nouvelles couleurs tendance web?

Pour reprendre l'image évoquée dans l'article consacré au look de son blog, un blog peut être assimilé à une pièce de sa maison.

On réfléchit à l'harmonie colorée avant de redécorer son salon. Pourquoi ne pas faire la même chose pour son blog blogger, et assortir les titres aux sous-titres?...

Parce-que le choix de couleur des fontes est très limité, et que l'on n'y trouve jamais celle qu'il nous faut! (Pas vrai, les filles?)
En particulier dès que l'on cherche des couleurs neutres: les gris colorés dont je conseillais l'usage pour les blogs photos.

Pourtant, en surfant, on rencontre à chaque détour de la toile de jolis sites tout en nuance, qui vous narguent du haut de leur palette subtile de prune, mauve, et autres délicates nuances azurées.
Choisir des couleurs qui ne figurent pas dans la palette de l'éditeur blog est très simple.
Comme vous vous en doutez, cela demande d'accéder au code HTML... mais uniquement celui de l'article en question.

Couleurs nature VS couleurs sûres pour le web

Préambule: dans la nature, il existe une infinité de couleurs différentes. Si elles sont en théorie presque toutes reproductibles dans un blog ou un site, certaines d'entre elles ne sont pas fiables: selon les navigateurs, elles ne s'afficheront pas de la même façon d'un ordinateur à l'autre, et un joli brun chaud se transformera en caca d'oie. Il est donc préférable de se référer à la palette des 216 couleurs "certifiées" web. Choix limité, mais sûr et largement supérieur à celui de la plupart des éditeurs blogs.

Codage RGB ou hexadécimal des couleurs web:

Dans le nuancier de 216 couleurs pour le web, chaque couleur est associée à un double codage:

• Le codage hexadécimal composé d'un groupe de lettres ou chiffres (exemple: FF0999) Pour l'inclure dans un article en HTML, ce groupe de chiffres et lettres doit être précédé par un "#". Exemple: #FF0999

• Le codage RGB (pour red-green-blue) est constitué de trois nombres. Dans l'onglet "Rédiger en HTML", une couleur s'écrit: rgb(255, 0, 0)

Pour savoir si votre éditeur de blog utilise le codage RGB ou hexadécimal, il vous suffit de taper un mot dans un article vierge. Vous lui appliquez n'importe quelle couleur. Vous allez ensuite regarder dans l'onglet "Rédiger en HTML" si la couleur est codée en RGB ou en hexadécimal. (Voir détails avec l'exemple de Blogger ci-dessous)

Un exemple de nuancier avec les couleurs certifiées web codées en rgb et hexadécimal. Cliquez sur l'image pour accéder au nuancier original. (Il en existe d'autres, après une recherche internet, choisissez celui qui vous convient et placez-le en évidence dans vos favoris)

Comment changer la couleur d'un groupe de mots dans blogger?

Lorsque vous rédigez un article sans spécifier une couleur particulière, votre texte s'affiche dans une couleur choisie par défaut. celle-ci est inscrite dans le code CSS de votre "mise en page" et non pas dans le code HTML de votre article.

Trouver quel codage couleur utilise votre éditeur blog:

Mais si vous changez la couleur de votre mot, le code de cette nouvelle couleur apparait dans la version HTML de votre article:

Exemple: Si l'on écrit le mot "MAGENTA" puis on lui applique la couleur rouge, MAGENTA dans "Rédiger" se présentera dans "Modifier le HTML" comme ça:

color: rgb(255, 0, 0);">MAGENTA

Traduction: modification de couleur (color) appliquer la couleur rgb(205, 0, 0) au mot MAGENTA.

Blogger utilise donc le code RGB pour définir ses couleurs dans les articles.

Remarque: Le codage des couleurs dans la feuille de style CSS et HTML du modèle blogger utilise le code hexadécimal, alors que les articles utilisent le code RGB (dans mon blog). Dans tous les cas, faites un essai pour vérifier quel code est accepté dans votre blog (généralement, les 2 types de codage sont acceptés).

Gros plan sur le double codage des couleurs

Changer la couleur d'un mot, d'un titre, d'un paragraphe:

Changer de couleur le mot magenta:

Je cherche dans la palette de 216 couleurs web celle que je veux. Je remplace simplement les nombres entre parenthèse par ceux de la nouvelle couleur, dans l'onglet "rédiger en HTML" de l'article.

MAGENTA (dans Rédiger) correspond maintenant à color: rgb(204, 0, 102);">MAGENTA (dans Modifier le code HTML)

Pas trop compliqué, et si vous voulez réutiliser cette même couleur ailleurs, inutile de retourner à chaque fois dans le HTML: procédez par copier-coller: copiez votre mot coloré et collez-le ailleurs dans l'article ou dans un nouvel article: le code couleur est automatiquement copié en même temps.

Si vous envisagez de vous servir régulièrement d'une série de couleurs, pensez à les écrire dans un article pense-bête au brouillon: ouvrez-le dès que vous en avez besoin et copiez le mot de la couleur souhaitée. Plus rapide que de se replonger à chaque fois dans le nuancier.

Quelles couleurs choisir? Quand utiliser ces nouvelles couleurs?

• Cette petite astuce pour introduire de nouvelles couleurs dans un article de blog peut servir ponctuellement: assortir parfaitement une légende à une image, par exemple.

• Elle vous permet aussi de sélectionner quelques couleurs assorties que vous utiliserez régulièrement pour animer vos articles (exemple: couleur des titres, des mots importants, des légendes de photographies...). Si tel est le cas, prenez le temps de choisir soigneusement quelques couleurs qui s'accordent entre elles et avec votre modèle.

Quelle palette de couleurs de police pour votre blog?

Deux options très réductrices s'offrent à vous:

• des couleurs dans les mêmes teintes que votre modèle pour un effet plus doux.

• des couleurs qui contrastent avec la couleur de votre modèle, pour attirer le regard.
  

La palette de couleurs de ce blog:

Dans mon cas, j'ai choisi des titres verts: la couleur opposée au rouge. Une association qui "claque". J'ai contrebalancé le contraste entre le rouge et le vert en utilisant un vert pâle, et en optant pour un rouge et un vert qui ne sont pas saturés: pas de couleurs vives, et pas de titres trop foncés. Depuis la rédaction de ce billet, j'ai refait le modèle de mon blog, pour passer à une palette de gris-verts très pâles monochromes et laisser aux photos le soin d'apporter de la couleur. Je n'utilise que très rarement d'autres couleurs (Sauf une police rouge pour souligner les points importants dans les articles sur la personnalisation ou l'optimisation SEO d'un blog): il y en a déjà bien assez dans mes photographies, inutile d'en rajouter.
La couleur de mes titres n'est pas très lisible: elle n'attire pas l'oeil car je laisse la priorité aux images.
Un titre dans un article blog a deux vocations: structurer la lecture pour le visiteur et souligner les mots importants pour google. Je privilégie la seconde fonction (à part dans certains articles tutoriels sur la personnalisation de son blog). Les titres me servent donc en priorité à décrire mes images et sont parfois redondants. Donc inutile de les écrire en lettres fluorescentes.

Cercle chromatique, interaction des couleurs et harmonie colorée: un vaste sujet

Je ne développe pas davantage ici le thème des associations et contrastes de couleurs: je ne suis pas certaine que le sujet passionne beaucoup d'entre vous. Ce sont des notions utiles pour le choix de son style de blog, mais aussi pour tout ce qui touche à la création d''image: photographier, peindre, illustrer...
Si toutefois vous souhaitez que je développe les notions d'harmonie colorée, couleurs primaires, secondaires, contraste, nuance ou camaïeu, laissez-moi un commentaire. Je réfléchirai alors à faire un article plus pointu sur ce vaste sujet...

___________________________________________________________________

Articles liés: Ces articles peuvent vous intéresser:

• Quel design pour un blog?
• Un pense-bête pour se rappeler des balises couleurs
• Modifier le code HTML d'un article ou d'un modèle, quels risques?
• Décoration blog: icônes et boutons design
• Un gadget google pour créer une palette de couleurs personnalisées pour sa page web