2. Choisir une palette de couleurs

Sans que cela représente une véritable obligation, définir d'emblée un assortiment de couleurs et/ou images peut s'avérer un bon préalable. Il vous faut au minimum une couleur contrastée pour les liens. Vous pouvez vous en tenir là, assortie de la vaste gamme des gris, comme c'est le cas pour le thème Kit2 dans sa version basique, avec une petite pointe de bleu dans les éléments décoratifs.

Si vous voulez en utiliser plusieurs, une présélection peut par exemple être faite sur la base suivante :

  • une couleur contrastée pour les liens en général
  • une couleur contrastée pour les liens de navigation, qui permettrait de les identifier rapidement
  • une couleur contrastée pour la titraille (titre du blog et/ou titres des billets et/ou intertitres)
  • une couleur discrète pour le fond de fenêtre si votre page n'occupe pas toute la largeur
  • une couleur discrète pour les fonds de blocs à contenu spécifique (citations, extraits de codes...)
  • une couleur discrète pour les fonds des commentaires

A titre d'exemple, voici la palette choisie pour le présent thème :

palette_kit2.png

En tous les cas, tâchez de ne pas perturber le lecteur : n'utilisez pas par exemple la même couleur pour du texte cliquable (liens) et non cliquable (intertitres), évitez les ton sur ton trop discrets qui gêneront les visiteurs percevant mal les couleurs - savez-vous par exemple que xx% des humains sont atteints de daltonisme à des degrés divers ?

Comment choisir ses couleurs ?

Il existe différents outils en ligne qui proposent une gamme de couleurs en harmonie avec la couleur de base qu'on leur indique. Vous pouvez vous y référer, ainsi qu'à d'autres petites ou grandes applications à télécharger sur votre ordinateur. Je vous invite à consulter la page consacrée aux outils sur Le Petit Dotclear illustré ou à effectuer vos propres recherches dans un moteur de recherche.

Une méthode que je recommande chaudement car elle évite bien des fautes de goût consiste à... faire confiance à la nature. Choisissez une photographie dont vous aimez les tonalités générales, paysages, bouquets de fleurs, animaux, etc. Puis recueillez les couleurs qui la composent pour établir votre palette.

Faites-en de même si vous disposez d'une image que vous souhaitez intégrer à votre blog (typiquement une bannière) ou d'un motif à placer en fond de fenêtre sous la page.

Au début du fichier style.css vous trouverez dans un commentaire les références des couleurs utilisées. Pour une première étape, vous pouvez, après avoir réalisé votre choix de palette, faire un cherche/remplace sur les #xxxxxx d'origine pour les remplacer par les vôtres.

Commentaires

1. Le mardi 4 décembre 2007, 20:18 par Azork

Hello,

Excellent article et très claire, juste un p'tit lien vers ce site http://www.w3schools.com/html/html_...

il propose une liste des couleurs compatibles avec la plupart des navigateurs, et indique le code Hex

peut être très utile...

2. Le mardi 2 juin 2009, 23:33 par Alain Saint-Etienne

...et pour les feignants (dans le rang desquels je me tiens peut-être ?), le site/service "Kuler" d'Adobe, qui propose des outils bien foutus pour trouver des déclinaisons de couleurs, et de bons contrastes :
http://kuler.adobe.com/