Dyrk

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 !

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