Comment vérifier si la couleur hexagonale est "trop ​​noire"?

Vous devez extraire les trois composants RVB individuellement, puis utiliser une formule standard pour convertir les valeurs RGB résultantes en leur luminosité perçue.

En supposant une couleur de six caractères:

 var c = c.substring(1); // strip # var rgb = parseInt(c, 16); // convert rrggbb to decimal var r = (rgb >> 16) & 0xff; // extract red var g = (rgb >> 8) & 0xff; // extract green var b = (rgb >> 0) & 0xff; // extract blue var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709 if (luma < 40) { // pick a different colour } 

MODIFIER

Depuis mai 2014, tinycolor maintenant une fonction getBrightness() , tout en utilisant les facteurs de pondération CCIR601 au lieu des UIT-R ci-dessus.

La bibliothèque TinyColor (vous l'avez déjà mentionné) fournit plusieurs fonctions pour inspecter et manipuler les couleurs, parmi lesquelles:

• GetBrightness

  Renvoie la luminosité perçue d'une couleur, de 0 à 255, telle que définie par les Lignes directrices sur l'accessibilité du contenu Web (version 1.0) .

   tinycolor("#fff").getBrightness(); // 255 

• est léger

  Renvoie un booléen indiquant si la luminosité perçue de la couleur est légère.

   tinycolor("#fff").isLight(); // true tinycolor("#000").isLight(); // false 

• est sombre

  Renvoie un booléen indiquant si la luminosité perçue de la couleur est sombre.

   tinycolor("#fff").isDark(); // false tinycolor("#000").isDark(); // true 

• GetLuminance

  Renvoie la luminance perçue d'une couleur, de 0 à 1, telle que définie par les Lignes directrices sur l'accessibilité du contenu Web (version 2.0) .

   tinycolor("#fff").getLuminance(); // 1 

Il existe une distinction importante entre la luminance et la luminosité. Luminance, en fin de journée, est une mesure de la quantité d'énergie parcourue dans une certaine zone et ignore complètement comment nos systèmes perceptifs perçoivent cette énergie. La luminosité, d'autre part, est une mesure de la façon dont nous percevons cette énergie et considère le rapport entre la luminance et notre système perceptif. (En tant que point de confusion, il y a un terme appelé luminance relative, qui semble être utilisé de manière synonyme avec des termes de luminosité. Cela m'a beaucoup changé).

Pour préciser, vous cherchez la «luminosité» ou «valeur» ou «relativement luminance» comme d'autres l'ont suggéré. Vous pouvez le calculer de manière différente (comme être humain!) http://fr.wikipedia.org/wiki/HSL_and_HSV#Lightness

1. Prenez le maximum de R, G et B.
2. Prenez la moyenne du maximum et du min de R, G et B.
3. Prenez la moyenne des trois.
4. Utilisez une moyenne pondérée comme d'autres l'ont suggéré ici.

Vous pouvez calculer la luminance :

La luminance est donc un indicateur de la luminosité de la surface.

Il est donc formidable de choisir si le texte doit être blanc ou noir.

 var getRGB = function(b){ var a; if(b&&b.constructor==Array&&b.length==3)return b; if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))return[parseInt(a[1]),parseInt(a[2]),parseInt(a[3])]; if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]; if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b))return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3], 16)]; if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]; return (typeof (colors) != "undefined")?colors[jQuery.trim(b).toLowerCase()]:null }; var luminance_get = function(color) { var rgb = getRGB(color); if (!rgb) return null; return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]; } 

La méthode ci-dessus vous permet de passer la couleur dans différents formats, mais l'algorithme est fondamentalement juste dans luminance_get .

Lorsque je l'ai utilisé, je réglais la couleur en noir si la luminance était supérieure à 180 , blanche sinon.

Une solution possible serait de convertir votre couleur de RGB en HSB . HSB signifie tonalité, saturation et luminosité (également connu sous le nom HSV, où V est pour la valeur). Ensuite, vous avez juste un paramètre à vérifier: la luminosité.

Je pense que cette conversation a quelques années, mais cela reste pertinent. Je voulais ajouter que mon équipe avait le même problème en Java (SWT) et a trouvé que c'était un peu plus précis:

 private Color getFontColor(RGB bgColor) { Color COLOR_BLACK = new Color(Display.getDefault(), 0, 0, 0); Color COLOR_WHITE = new Color(Display.getDefault(), 255, 255, 255); double luminance = Math.sqrt(0.241 * Math.pow(bgColor.red, 2) + 0.691 * Math.pow(bgColor.green, 2) + 0.068 * Math.pow(bgColor.blue, 2)); if (luminance >= 130) { return COLOR_BLACK; } else { return COLOR_WHITE; } }