Il y a 3 semaines, j’expliquais sur ce blog comment créer un algorithme qui était capable de définir automatiquement la couleur d’un texte par rapport à son arrière plan. Aujourd’hui, je vous propose de trier un set (ou une palette) de couleur.

Pour vous faciliter nous faciliter la tâche voici quelques restrictions :

1. Notre set (ou palette) sera composé de 5 couleurs
2. Les couleurs devront être triées de la plus claire à la plus foncée (l’inverse est tout aussi possible)

En fidèle lecteur de ce blog vous vous souvenez sans doute de cet article où j’expliquais comment réaliser une fonction de tri simple. Grâce à ces deux précédents articles nous sommes capable de réaliser de réaliser une fonction de tri de couleur.

La théorie

Pour savoir si une couleur est plus clair ou plus foncée qu’une autre, il suffit de se référer à la luminance de leurs codes HSL. Au lieu de trier des nombres du plus petit au plus grand il faut donc trier les couleurs par leurs composantes HSL de la plus grande (100% : blanc) à la plus petite (0% : noir).

L’algorithme

Ce qui nous donne cet algorithme :

L’équivalent Javascript n’est pas très différent. Les fonctions convertirTableauCouleurHEXversHSL et convertirTableauCouleurHSLversHEX vont en fait transformer le code HEXA en RGB puis en HSL et inversement.

Pour ce qui est de la méthode intervertir. Elle ne fait rien d’autre qu’une inversion (swap) entre 2 éléments (spécifiés par leurs index) d’un même tableau. Le code Javascript est donc :

Démonstration en javascript

J’ai réalisé une démonstration en javascript de cet algorithme sur le sous domaine projets. Le script importe dynamiquement (via l’API de ColourLovers) des palettes de couleurs il vous suffit alors de cliquer sur une palette pour la trier.

A chaque chargement de l’API, une seconde palette est générée et contient toutes les couleurs des autres palettes le temps de tri est légèrement plus long mais le résultat est là.

Pour accéder à la démo de tri des couleurs en javascript c’est par ici.

Remarque : Certaines palettes ont déjà leurs couleurs de triées de la plus foncées à la plus clair.

Petite note de service pour vous informer de la mise à jour de mon générateur de bookmarklet permettant d’insérer une signature HTML sous Gmail. J’avais réalisé la première version dans mes débuts avec jQuery et je ne connaissais pas la méthode .prepend() : maintenant la signature s’ajoute tout en haut de votre email, il vous suffit donc de l’ajouter puis d’écrire ensuite votre message.

D’ailleurs Ghacks proposait aujourd’hui un article, qui (…outre le fait d’y intégrer un lien vers mon générateur ^^) propose 90 outils et astuces pour devenir un Pro de Gmail.

Si vous avez des suggestions concernant le bookmarklet, j’en tiendrais compte pour la prochaine version.

Certains d’entre vous l’on peut-être remarqué. L’ancienne adresse du flux RSS redirige vers http://feeds2.feedburner.com/geekfg. Cette adresse est donc la nouvelle adresse du flux, pensez à mettre à jour vos Netvibes, Google Reader et autres agrégateurs RSS.