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 :
- Notre set (ou palette) sera composé de 5 couleurs
- 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 :
tabCouleur = ["0B8C8F", "FCF8BC", "CACF43","2B2825","D6156C"]
//Convertir de HEX en HSL
convertirTableauCouleurHEXversHSL(tabCouleur);
//Le tableau est maintenant de la forme :
//tabCouleur = [[,,], [,,], [,,], [,,], [,,]]
//Luminance de la première couleur : tabCouleur[0][2]
Faire
Si(tabCouleur[0][2] < tabCouleur[1][2])
tabCouleur.intervertir(0,1);
SinonSi(tabCouleur[1][2] < tabCouleur[2][2])
tabCouleur.intervertir(2,3);
SinonSi(tabCouleur[2][2] < tabCouleur[3][2])
tabCouleur.intervertir(2,3);
SinonSi(tabCouleur[3][2] < tabCouleur[4][2])
tabCouleur.intervertir(3,4);
TantQue(!( tabCouleur[0][2] >= tabCouleur[1][2]
&& tabCouleur[1][2] >= tabCouleur[2][2]
&& tabCouleur[2][2] >= tabCouleur[3][2]
&& tabCouleur[3][2] >= tabCouleur[4][2]))
//Convertir de HSL -> HEX
convertirTableauCouleurHSLversHEX(tabCouleur); 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 :
var tmp=tabCouleur[x];
tabCouleur[x]=tabCouleur[y];
tabCouleur[y]=tmp;
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.