Wie kann ich überprüfen, ob die Hex-Farbe „zu schwarz“ ist?

Ich versuche, die Dunkelheit einer von einem Farbwähler ausgewählten Farbe zu bewerten, um festzustellen, ob sie "zu schwarz" ist, und wenn ja, setzen Sie sie auf Weiß. Ich dachte, ich könnte die ersten Zeichen des Hex-Werts verwenden, um dies zu erreichen. Es funktioniert, aber es wechselt auch einige rechtmäßige "helle" Farben.

Ich habe Code, der dies tut:

        if (lightcolor.substring(0,3) == "#00"|| lightcolor.substring(0,3) == "#010"){
            lightcolor="#FFFFFF";
            color=lightcolor;
        }

Es muss einen effizienteren Weg mit Hex-Mathematik geben, um zu wissen, dass eine Farbe einen bestimmten Grad an Dunkelheit überschritten hat? Zum Beispiel, wenn Lichtfarbe + "irgendein Hex-Wert" <= "irgendein Hex-Wert", dann setzen Sie es auf Weiß.

Ich habe tinyColor hinzugefügt, was hierfür von Nutzen sein könnte, aber ich weiß es nicht genau.

Sie müssen die drei RGB-Komponenten einzeln extrahieren und dann eine Standardformel verwenden, um die resultierenden RGB-Werte in ihre wahrgenommene Helligkeit umzuwandeln.

Angenommen, eine Farbe mit sechs Zeichen:

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
}

BEARBEITEN

Seit Mai 2014 hat tinycolornun eine getBrightness()Funktion, obwohl die CCIR601-Gewichtungsfaktoren anstelle der oben genannten ITU-R-Faktoren verwendet werden.

BEARBEITEN

Der resultierende Luma-Wertebereich ist 0..255, wobei 0 am dunkelsten und 255 am hellsten ist. Werte größer als 128 werden von als hell angesehen tinycolor. (schamlos aus den Kommentaren von @ pau.moreno und @Alnitak kopiert)

Die TinyColor- Bibliothek (Sie haben sie bereits erwähnt) bietet verschiedene Funktionen zum Überprüfen und Bearbeiten von Farben, darunter:

• getBrightness

  Gibt die wahrgenommene Helligkeit einer Farbe von 0 bis 255 zurück, wie in den Richtlinien für die Barrierefreiheit von Webinhalten (Version 1.0) definiert .

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

• ist Licht

  Geben Sie einen Booleschen Wert zurück, der angibt, ob die wahrgenommene Helligkeit der Farbe hell ist.

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

• ist dunkel

  Geben Sie einen Booleschen Wert zurück, der angibt, ob die wahrgenommene Helligkeit der Farbe dunkel ist.

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

• getLuminance

  Gibt die wahrgenommene Luminanz einer Farbe von 0-1 zurück, wie in den Richtlinien für die Barrierefreiheit von Webinhalten (Version 2.0) definiert .

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

Ich habe diese WooCommerce Wordpress PHP-Funktion ( wc_hex_is_light ) gefunden und in JavaScript konvertiert. Funktioniert gut!

function wc_hex_is_light(color) {
    const hex = color.replace('#', '');
    const c_r = parseInt(hex.substr(0, 2), 16);
    const c_g = parseInt(hex.substr(2, 2), 16);
    const c_b = parseInt(hex.substr(4, 2), 16);
    const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
    return brightness > 155;
}

Sie können die Luminanz berechnen :

Die Luminanz ist somit ein Indikator dafür, wie hell die Oberfläche erscheint.

Es ist also eine gute Wahl, ob der Text weiß oder schwarz sein soll.

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

Mit der obigen Methode können Sie die Farbe in verschiedenen Formaten übergeben, aber der Algorithmus ist im Grunde nur in luminance_get .

Als ich es benutzte, stellte ich die Farbe auf Schwarz ein, wenn die Luminanz größer war als 180ansonsten Weiß.

Hier gibt es einen wichtigen Unterschied zwischen Luminanz und Helligkeit. Die Luminanz am Ende des Tages ist ein Maß dafür, wie viel Energie durch einen bestimmten Bereich fließt, und ignoriert vollständig, wie unsere Wahrnehmungssysteme diese Energie wahrnehmen. Die Helligkeit hingegen ist ein Maß dafür, wie wir diese Energie wahrnehmen, und berücksichtigt die Beziehung zwischen Luminanz und unserem Wahrnehmungssystem. (Aus Verwirrung gibt es einen Begriff namens relative Luminanz, der synonym mit Helligkeitsbegriffen verwendet zu werden scheint. Er hat mich gut gestolpert).

Um genau zu sein, suchen Sie nach "Helligkeit" oder "Wert" oder "relativ Luminanz", wie andere vorgeschlagen haben. Sie können dies auf verschiedene Arten berechnen (so soll es menschlich sein!) Http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness

1. Nimm das Maximum von R, G und B.
2. Nehmen Sie den Durchschnitt von Max und Min aus R, G und B.
3. Nehmen Sie den Durchschnitt aller drei.
4. Verwenden Sie einen gewichteten Durchschnitt, wie andere hier vorgeschlagen haben.

Dies funktioniert mit hex zB #fefefe

function isTooDark(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    // Return new color if to dark, else return the original
    return (yiq < 40) ? '#2980b9' : hexcolor;
}

Sie können es ändern, um zurückzukehren trueoder falsedurch Änderung

return (yiq < 40) ? '#2980b9' : hexcolor;

zu

return (yiq < 40);

Eine mögliche Lösung wäre, Ihre Farbe von RGB in HSB zu konvertieren . HSB steht für Farbton, Sättigung und Helligkeit (auch als HSV bekannt, wobei V für Wert steht). Dann müssen Sie nur noch einen Parameter überprüfen: Helligkeit.

Mir ist klar, dass dieses Gespräch ein paar Jahre alt ist, aber es ist immer noch relevant. Ich wollte hinzufügen, dass mein Team das gleiche Problem in Java (SWT) hatte und fand dies etwas genauer:

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