Как изменить цвет текста, определяемый цветом фона? - PullRequest
Новая
       6

Как изменить цвет текста, определяемый цветом фона?

15 голосов
/ 18 января 2011

Я ищу способ, в идеале с jQuery, определить правильный цвет текста, основываясь на яркости цвета фона?

например. белый фон, черный цвет текста. Я считаю, что это можно сделать грубо, добавив значение HEX и предположения, но кто-нибудь знает лучший или jQuery способ сделать это?

1 Ответ

33 голосов
/ 18 января 2011

Вы можете попробовать инвертировать шестнадцатеричное значение цвета. Таким образом, #FFFFFF становится #000000, а #AAAAAA становится #555555. Конечно, этот метод проваливается, когда у вас есть #888888, который при инвертировании дает вам #777777 (они не сильно контрастируют).

Это сообщение в блоге описывает другой способ (они используют только черный или белый для цвета переднего плана, в зависимости от цвета фона). Я перевел это на Javascript: 

function idealTextColor(bgColor) {

   var nThreshold = 105;
   var components = getRGBComponents(bgColor);
   var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);

   return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";   
}

function getRGBComponents(color) {       

    var r = color.substring(1, 3);
    var g = color.substring(3, 5);
    var b = color.substring(5, 7);

    return {
       R: parseInt(r, 16),
       G: parseInt(g, 16),
       B: parseInt(b, 16)
    };
}
...