Come verificare se il colore esadecimale è "troppo nero"?

Sto cercando di valutare l'oscurità di un colore scelto da un selettore di colori per vedere se è "troppo nero" e, in tal caso, impostarlo su bianco. Ho pensato di poter utilizzare i primi caratteri del valore esadecimale per ottenere questo risultato. Funziona, ma cambia anche alcuni colori legittimamente "chiari".

Ho un codice che fa questo:

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

Ci deve essere un modo più efficiente con la matematica esadecimale per sapere che un colore è andato oltre un certo livello di oscurità? Come se colore chiaro + "un valore esadecimale" <= "un valore esadecimale", impostalo su bianco.

Ho aggiunto tinyColor, che potrebbe essere utile per questo, ma non lo so per certo.

È necessario estrarre i tre componenti RGB individualmente e quindi utilizzare una formula standard per convertire i valori RGB risultanti nella loro luminosità percepita.

Supponendo un colore di sei caratteri:

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
}

MODIFICARE

Da maggio 2014 tinycolorha ora una getBrightness()funzione, seppur utilizzando i fattori di ponderazione CCIR601 invece di quelli ITU-R sopra.

MODIFICARE

L'intervallo di valori della luminanza risultante è 0..255, dove 0 è il più scuro e 255 è il più chiaro. I valori maggiori di 128 sono considerati leggeri da tinycolor. (spudoratamente copiato dai commenti di @ pau.moreno e @Alnitak)

La libreria TinyColor (l'hai già menzionata) fornisce diverse funzioni per l'ispezione e la manipolazione dei colori, tra cui:

• getBrightness

  Restituisce la luminosità percepita di un colore, da 0 a 255, come definito dalle Linee guida per l'accessibilità dei contenuti Web (versione 1.0) .

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

• isLight

  Restituisce un valore booleano che indica se la luminosità percepita del colore è chiara.

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

• è scuro

  Restituisce un valore booleano che indica se la luminosità percepita del colore è scura.

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

• getLuminance

  Restituisce la luminanza percepita di un colore, da 0 a 1 come definito dalle Linee guida per l'accessibilità dei contenuti Web (versione 2.0) .

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

Ho trovato questa funzione PHP di WooCommerce Wordpress ( wc_hex_is_light ) e l'ho convertita in JavaScript. Funziona bene!

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

Puoi calcolare la luminanza :

La luminanza è quindi un indicatore di quanto luminosa apparirà la superficie.

Quindi è fantastico scegliere se il testo deve essere bianco o nero.

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

Il metodo sopra ti consente di passare il colore in diversi formati, ma l'algoritmo è fondamentalmente solo in luminance_get.

Quando l'ho usato, stavo impostando il colore su nero se la luminanza era maggiore di 180, altrimenti bianco.

C'è un'importante distinzione qui tra luminanza e luminosità. La luminanza, alla fine della giornata, è una misura di quanta energia viaggia attraverso una certa area e ignora completamente il modo in cui i nostri sistemi percettivi percepiscono quell'energia. La luminosità, d'altra parte, è una misura di come percepiamo quell'energia e tiene conto della relazione tra la luminanza e il nostro sistema percettivo. (Come punto di confusione, c'è un termine chiamato luminanza relativa, che sembra essere usato come sinonimo di termini di luminosità. Mi ha fatto scattare bene).

Per essere precisi, stai cercando "luminosità" o "valore" o "luminanza relativamente" come altri hanno suggerito. Puoi calcolarlo in molti modi diversi (come essere umani!) Http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness

1. Prendi il massimo di R, G e B.
2. Prendi la media del massimo e del minimo da R, G e B.
3. Prendi la media di tutti e tre.
4. Usa una media ponderata come altri hanno suggerito qui.

Funziona con esadecimale, ad esempio #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;
}

Puoi cambiarlo per tornare trueo falseper cambio

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

per

return (yiq < 40);

Una possibile soluzione sarebbe convertire il tuo colore da RGB a HSB . HSB sta per tonalità, saturazione e luminosità (noto anche come HSV, dove V sta per valore). Allora hai solo un parametro da controllare: la luminosità.

Mi rendo conto che questa conversazione risale a pochi anni fa, ma è ancora rilevante. Volevo aggiungere che il mio team stava riscontrando lo stesso problema in Java (SWT) e l'ho trovato un po 'più preciso:

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