[SPIP 1.9 et GD2] SPIP permet d’extraire automatiquement une couleur d’une image, afin de l’appliquer à d’autres éléments d’interface. -- Par exemple, à côté du logo d’un article, nous allons afficher le titre du même article dans une couleur tirée de ce logo. De cette façon, tout en rendant l’affichage plus varié (d’un article à l’autre, la couleur utilisée change en fonction du logo), le fait que la couleur soit extraite de l’image assure une certaine cohérence graphique. Cette fonction consistant à récupérer une couleur dans une image est complétée par toute une série de fonctions permettant de manipuler cette couleur, principalement éclaircir et foncer la couleur. La liste de fonctions est longue, de façon à permettre un nombre très important -- À partir d’une image (logo d’article, logo de rubrique..., mais aussi images de portfolio), on demande à SPIP de tirer une couleur. -- Attention : il ne s’agit pas pour SPIP de déterminer la couleur dominante de l’image, mais d’extraire une couleur de l’image. Pour que cette couleur soit réellement « représentative », l’image est réduite à une taille de 20 pixels maximum ; ainsi les différentes couleurs de -- expérimentale : elle est suffisamment basse pour éviter d’extraire une couleur très peu présente dans l’image ; elle est suffisamment élevée pour éviter que la couleur soit systématiquement grisâtre. Utilisée sans paramètres, la fonction couleur_extraire retourne une couleur située légèrement au-dessus du centre de l’image. Il est possible d’indiquer un point préféré pour le sondage, en passant deux -- retourne une couleur située en haut à droite du centre de l’image. Pour bien comprendre le principe, appliquons ce filtre sur un logo de couleur uniforme : -- On peut, par exemple, appliquer cette couleur au fond d’un pavé : -- En bas à gauche, la couleur extraire sans paramètres, c’est-à-dire présente un peu au dessus du centre de l’image (marron clair de la pierre du bâtiment). En bas à droite, on force une couleur située en haut à droite de l’image (bleu clair du ciel). -- l’exploiter... Voici quelques utilisations : — couleur de texte ; — couleur de fond d’un pavé ; — couleur d’une image typographique ; — modifier la couleur d’une image (image_sepia)... Modifier la couleur Une fois la couleur extraite, il est utile de la manipuler, afin de jouer avec différentes variantes de la couleur, tout en respectant la cohérence graphique. -- À partir de la couleur extraite d’une image, nous souhaitons afficher des couleurs plus foncées et plus claires. -- Si nous appliquons la couleur extraite au fond d’un pavé de texte, il faut déterminer dans quelle couleur nous voulons écrire ce texte (par exemple : noir sur orange ou blanc sur orange ?) ; c’est ce que nous -- Pour l’instant, nous décidons que le texte sera d’une certaine couleur. Nous voulons par exemple que le texte soit noir. Il faut donc choisir la couleur du fond en fonction de ce texte noir : il faut que la couleur du fond soit claire (donc : texte noir sur fond clair). Si nous appliquons le filtre couleur_eclaircir à notre couleur extraite, nous avons deux cas : — si la couleur est foncée, alors elle est éclaircie et nous obtenons l’effet voulu ; — si la couleur est déjà claire, alors nous l’éclaircissons encore, et nous obtenons un fond qui peut devenir quasiment blanc. Or, la couleur étant déjà claire , nous aurions voulu l’utiliser telle quelle. -- C’est ici que nous appliquons le filtre couleur_eclaircir_si_foncee : — si la couleur est foncée, nous l’éclaircissons ; — si la couleur est claire, nous l’utilisons telle quelle. -- systématiquement foncé, mais en évitant de rendre ce fond quasiment noir quand la couleur d’origine est déjà foncée. -- Le filtre couleur_extreme passe une couleur foncée en noir, et une couleur claire en blanc. Cela est utile pour écrire en noir ou blanc sur un fond coloré. En réalité, récupérer la couleur « extrême » est habituellement utilisé avec couleur_inverser, il inverse la couleur RVB. Elle transforme notamment du noir en blanc, et du blanc en noir. -- En pratique, cela permet d’assurer un bon contraste, quelle que soit la couleur du fond du bloc (alors que, dans l’exemple précédent, nous choisissions la couleur du fond du bloc en fonction d’une couleur de texte). Appliquons, en couleur de fond, la couleur extraite de l’image : -- Appliquons, pour la couleur du texte, la couleur extraite, rendue « extrême » : -- — Si la couleur est foncée, la couleur extrême est noire ; nous écrivons en noir sur fond foncé. — Si la couleur est claire, la couleur extrême est blanche ; nous écrivons en blanc sur fond clair. Dans les deux cas, c’est peu lisible. On pourra utiliser cette couleur pour un autre effet (par exemple : une bordure autour du div). Il nous reste à inverser cette couleur pour l’appliquer au texte ; -- — Si la couleur extraite est foncée, la couleur extrême est noire, et l’inverse est alors blanche. On écrit en blanc sur fond foncé. — Si la couleur extraite est claire, la couleur extrême est blanche, et l’inverse est alors noire. On écrit en noir sur fond clair. -- Le filtre couleur_saturation parcourt la saturation de la couleur : — |couleur_saturation{0} retourne le blanc, — |couleur_saturation{1} retourne la couleur avec sa saturation au maximum (qui n’est pas le noir, sauf si l’on part d’un gris pur), — entre les valeurs 0 et 1, toute la déclinaison de la saturation de cette couleur. Jouer sur la saturation permet d’obtenir des déclinaisons extrêmement fines à partir d’une couleur, sans introduire dans cette couleur d’effets de « grisé » (un orange de ne vient jamais marron, un vert de devient jamais grisâtre...). En revanche, la valeur maximale est une couleur « pure », dont la luminance est très variable (le bleu porté à la luminance maximale est très sombre ; le jaune porté à sa luminance maximale reste une couleur claire). Le filtre couleur_luminance parcourt la luminance de la couleur : — |couleur_luminance{0} retourne le blanc, — |couleur_luminance{1} retourne le noir, — |couleur_luminance{0.5} retourne une variante de la couleur d’origine avec une luminance moyenne. -- Avec cette fonction, on joue sur gamme de 0 à 1 facile à utiliser : on va toujours du 0 au 1 en passant par la couleur d’origine. Le résultat final est donc beaucoup plus prévisible : avec une variable de 0 à 0.5, on obtiendra toujours une couleur claire, et de 0.5 à 1 une couleur foncée.