Dyrk.org
Do You Really Know

[ALGO] – Détecter si une couleur est sombre où non !

Publié le 26 février 2016 par #Ro0t

Batman-Forever

 

Salut à tous,

 

Je m’adresse tout particulièrement aujourd’hui, à mes amis développeurs …
Si vous aimez les scripts plutôt intelligents, qui analysent un peu l’environnement dans lequel ils sont … de manière à interagir au mieux … j’ai la solution ;)

 

Un petit algorithme qui va vous retourner soit blanc … soit noir …
En fonction de la couleur que vous lui enverrez !

 

Alors « à quoi ça sert ? » me direz-vous …
Et bien voici ce que ce genre de script vous permettra d’éviter !

Capture

 

Pour vous expliquer un peu l’algo ..
Prenez la couleur RGB (Rouge, Verte, Bleu) de votre fond :

Si
0.3*(couleur_rouge) + 0.59*(couleur_verte) +(0.11*(couleur_bleue)
est supérieur ou égal à 128
C’est une couleur claire … sinon c’est une couleur foncée

 

Aussi, si c’est une couleur foncée … vous afficherez plutôt une couleur de texte claire, et inversement !

 
Pour les plus feignants, j’ai réalisé pour vous un code Javascript qui fera le boulot :

[pastacode lang= »javascript » message= » » highlight= » » provider= »manual »]

function getOpositeColor(rgb) { // Like this : rgb(0, 0, 0);
    while (rgb.indexOf(' ') != -1) rgb = rgb.replace(' ', '');
    //Check if is formatted as RGB
    if ((x = /([0-9]{0,3}),([0-9]{0,3}),([0-9]{0,3})/.exec(rgb))) {
        //Extract colors
        color = {
            'r': parseInt(x[1]),
            'g': parseInt(x[2]),
            'b': parseInt(x[3])
        };
        //If is this operation be <= 128 return white, others else return black
        OpositeColor = ((0.3 * (color['r'])) + (0.59 * (color['g'])) + (0.11 * (color['b'])) <= 128) ? '#FFF' : '#000';
        return OpositeColor;
    }
    return -1;
}

[/pastacode]

 

C'est une fonction à laquelle, vous enverrez en paramètre, votre code RGB

getOpositeColor("rgb( 0, 23, 134)");

Vous pouvez également l'envoyer comme ça :

getOpositeColor("0, 23, 134");

 

Vous l'aurez bien sur compris, la fonction se chargera de détecter et d'extraire les valeurs ;)
Se qui vous simplifiera la vie !

 

J'ai réalisé pour vous un petit "Main Test" qui fonctionne plutôt pas trop mal sous chrome

 

[pastacode lang="markup" message="" highlight="" provider="manual"]



Couleur de fond clair




Couleur de fond foncée

[/pastacode]

 

Aussi, si vous testez le "main test" la fonction fait le job ;)

 

Capture