[SPIP 1.9 et GD2] Une habitude très utile lorsqu’on construit l’interface graphique d’un site Web consiste à choisir un nombre restreint de couleurs (par exemple, 3 couleurs), ce qui revient à définir une palette de couleurs, et à réaliser le site en n’utilisant que ces couleurs. Cela garantit au site un grande cohérence graphique, même lorsque les contenus et les maquettes sont différentes d’une page à l’autre1.
Pour créer et manipuler les couleurs, SPIP 1.9 fournit un ensemble de filtres destinés à exploiter une couleur tirée d’une image. Je vous conseille vivement de vous pencher sur cet aspect de SPIP, il permet, subtilement, de modifier sa palette graphique en fonction d’images (logos par exemple) associées à la page affichée.
Si la maquette du site est suffisamment forte (i.e. la structure graphique est reconnaissable immédiatement d’une page à l’autre), on peut ainsi introduire des éléments dont la couleur change, ce qui à la fois donne de la diversité aux pages, mais aussi permet d’utiliser des couleurs cohérentes avec les images. Par exemple, on peut afficher la description d’une image dans un pavé de texte dont le fond est une couleur tirée de cette image.
Voici par exemple une image avec, en dessous, un pavé d’une couleur tirée de cette image :
L’article qui suit va tenter de dépasser l’utilisation d’une unique couleur extraite pour créer une palette complète. À partir de la couleur extraite (ici un orange foncé), nous allons fabriquer automatiquement d’autres couleurs. Les filtres de SPIP permettent de créer des variantes foncées et éclaircies d’une couleur, ici nous allons trouver d’autres teintes.
Une méthode fréquente consiste à utiliser une roue chromatique. Il s’agit d’un cercle dans lequel on place notre couleur de référence ; en « tournant » régulièrement autour de cette roue, on obtiendra d’autres couleurs, de teinte nettement différente de notre couleur d’origine, mais dont la saturation et la luminosité seront identiques.
Dans l’image ci-dessus, nous avons indiqué notre orange foncé.
Parcourons notre roue selon six « angles » également espacés (nous prenons le chiffre 6 pour les besoins de l’explication, absolument n’importe quelle autre subdivision est possible) :
Si nous récupérons les six couleurs ainsi obtenues, nous avons une palette de six couleurs, dont les teintes sont espacées régulièrement sur la roue. Nous pouvons tout aussi bien décider de n’utiliser que trois couleurs, chiffre assez habituel pour une palette utilisable sur un site Web ; nous pouvons utiliser des couleurs espacées régulièrement (1, 3, 5), ou décider de rester « près » de notre couleur d’origine (1, 2, 6)...
Pour jouer en direct avec une roue chromatique, n’hésitez pas à visiter le site WellStyled, il fournit en ligne un outil très pratique.
Visuellement, la logique est très simple. Il faut maintenant la transformer en logique informatique. Le codage RVB, que nous utilisons habituellement sur le Web pour décrire les couleurs, ne donne pas accès directement à la « teinte » d’une couleur. Cependant, nous avons déjà évoqué cette limitation, et nous l’avons déjà contournée. Dans notre article sur un filtre de saturation/désaturation, nous avons présenté le codage HSV (hue, saturation, value), qui donne directement accès à l’information de teinte (hue)2
Dans le codage HSV, la valeur hue est, très exactement, la position de la couleur sur la roue chromatique : 0 est le rouge, puis en augmentant cette valeur (jusqu’à 100% dans notre cas, jusqu’à 360° dans une logique Photoshop), on parcourt la roue ci-dessus dans le sens des aiguilles d’une montre.
Commençons par reprendre les deux fonctions PHP qui convertissent du RVB en HSV (et inversement), que nous avions développées pour le filtre de désaturation :
Voici maintenant notre filtre de roue chromatique :
On lui passe la valeur de la couleur codée en RVB hexadécimale (de la forme FFFFFF), et la « position » de la couleur désirée sur la roue chromatique (de la forme 3/6, signifiant la troisième couleur en découpant la roue en six portions).
On commence par extraire les valeurs de position et le nombre de tranches de la roue (3 et 6) :
On transforme la couleur RVB hexadécimale en ses trois composantes R, V et B décimales (de 0 à 255) :
On convertit en HSV :
Voici le code de transformation proprement dit :
On « décale » maintenant notre teinte dans la roue chromatique. La valeur « 1 » qui apparaît plusieurs fois est égale aux « 100% » que l’on utilise dans notre codage HSV (dans Photoshop, on travaillerait avec une logique basée sur 360°).
Enfin on passe cette nouvelle valeur (on n’a changé que la teinte ; la saturation et la luminosité sont inchangées) en trois composantes R, V et B décimales, que l’on convertit ensuite en RVB hexadécimal ; c’est cette valeur que l’on retourne :
L’utilisation du filtre se fait ainsi :
On extrait une couleur de l’image, puis on demande la troisième couleur sur la roue chromatique divisée en six portions.
Si l’on affiche les six couleurs extraites (la couleur 1 est toujours la couleur d’origine), on obtient la palette suivante :
Appliquée à une autre image, la couleur extraite est plus « pastel » ; on constate que la palette graphique présente bien six teintes différentes, mais qui sont toutes bien des pastels :
1J’en profite pour signaler l’existence d’un widget très sympathique, ColorBurn, qui fournit chaque jour une palette de quatre couleurs toujours bien choisie. Ce widget est disponible pour Dashboard (MacOS X Tiger) et Yahoo Widgets (MacOS et Win XP).
2Lisez ou relisez cet article pour comprendre le codage HSV.
3J’en profite pour signaler l’existence d’un widget très sympathique, ColorBurn, qui fournit chaque jour une palette de quatre couleurs toujours bien choisie. Ce widget est disponible pour Dashboard (MacOS X Tiger) et Yahoo Widgets (MacOS et Win XP).
4Lisez ou relisez cet article pour comprendre le codage HSV.