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

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 :

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;
}

 

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

 

<div id="bgclair" style="background:#F7D7D7;">Couleur de fond clair</div>


<div id="bgfonce" style="background:#870707;">Couleur de fond foncée</div>


<script>
//Test d'un bloc clair
d = document.getElementById('bgclair');
d.style.color = getOpositeColor(d.style.background);

//Test d'un bloc foncé
d = document.getElementById('bgfonce');
d = d.style.color = getOpositeColor(d.style.background);
</script>

 

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

 

Capture

Partagez ce contenu

One comment

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *