Як перевірити, чи «шестигранний» колір занадто чорний?

Я намагаюся оцінити темряву кольору, обраного кольором, щоб побачити, чи він "занадто чорний", і якщо так, встановіть його на білий. Я подумав, що можу використати перші символи шістнадцяткового значення, щоб зняти це. Це працює, але він також перемикає деякі законно "світлі" кольори теж.

У мене є такий код:

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

Має бути більш ефективний спосіб з шестигранною математикою знати, що колір вийшов за межі певного рівня темряви? Як, наприклад, якщо lightcolor + "деяке значення шістнадцятки" <= "деяке шестигранне значення", то встановіть його на білий.

Я додав tinyColor, який може бути корисний для цього, але я не знаю точно.

Ви повинні витягти три компоненти RGB окремо, а потім використати стандартну формулу для перетворення отриманих значень RGB в їх сприйняту яскравість.

Якщо припустити шість символів:

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
}

EDIT

З травня 2014 року tinycolorтепер getBrightness()функціонує, хоча використовує вагові коефіцієнти CCIR601 замість МСЕ-R вище.

EDIT

Отриманий діапазон значень луми становить 0..255, де 0 - найтемніший, а 255 - найлегший. Значення більше 128 вважаються світлими tinycolor. (безсоромно скопійовано з коментарів @ pau.moreno та @Alnitak)

Бібліотека TinyColor (ви вже згадували про неї) пропонує кілька функцій для огляду та маніпулювання кольорами, серед них:

• getBrightness

  Повертає сприйняту яскравість кольору від 0-255, як визначено Правилами доступності веб-вмісту (Версія 1.0) .

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

• isLight

  Поверніть булевий сигнал із зазначенням того, чи сприймається яскравість кольору світлом.

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

• isDark

  Поверніть булевий сигнал із зазначенням, чи сприймається яскравість кольору темним.

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

• getLuminance

  Повертає сприйняту яскравість кольору від 0-1, як визначено Правилами доступності веб-вмісту (Версія 2.0) .

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

Я знайшов цю функцію PHP WooCommerce Wordpress ( wc_hex_is_light ) і перетворив на JavaScript. Добре працює!

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

Ви можете обчислити яскравість :

Таким чином, освітленість є показником того, наскільки яскравою буде поверхня.

Тож чудово вибрати, чи текст повинен бути білим чи чорним.

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

Наведений вище метод дозволяє передавати колір у різних форматах, але алгоритм в основному є саме в luminance_get.

Коли я користувався ним, я встановлював колір чорним, якщо яскравість була більшою, ніж 180біла в іншому випадку.

Тут важлива відмінність між яскравістю та яскравістю. В кінці дня освітленість - це міра того, скільки енергії проходить через певну область і повністю ігнорує те, як наші сприйнятливі системи сприймають цю енергію. Яскравість, з іншого боку, - це міра того, як ми сприймаємо цю енергію і враховує взаємозв'язок між яскравістю та нашою сприйнятливою системою. (В якості плутанини є термін, який називається відносною яскравістю, який, здається, використовується синонімом термінів яскравості. Це спричинило мене добре).

Якщо бути точним, ви шукаєте "яскравість" або "значення" або "відносну яскравість", як запропонували інші. Ви можете обчислити це декількома різними способами (такими, щоб бути людьми!) Http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness

1. Візьміть максимум R, G і B.
2. Візьмемо середнє значення max і min від R, G і B.
3. Візьміть середнє значення всіх трьох.
4. Використовуйте деякі середньозважені, як пропонують інші.

Ця робота з шістнадцятковою, наприклад, #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;
}

Ви можете змінити його для повернення trueабо falseшляхом зміни

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

до

return (yiq < 40);

Можливим рішенням буде перетворення вашого кольору з RGB в HSB . HSB означає відтінок, насиченість і яскравість (також відомий як HSV, де V - значення). Тоді у вас є лише один параметр для перевірки: яскравість.

Я усвідомлюю, що цій розмові кілька років, але вона все ще актуальна. Я хотів би додати, що моя команда мала таку саму проблему в Java (SWT) і вважала, що це трохи точніше:

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