如何更改由背景颜色确定的文本颜色?

时间:2011-01-18 16:20:23

标签: javascript jquery colors hex

我正在寻找一种理想的jQuery方法,根据背景颜色的亮度来确定正确的文本颜色?

E.g。白色背景,黑色文本颜色。我相信这可以粗略地添加HEX值和猜测,但有没有人知道更好的方法或jQuery方式来做到这一点?

1 个答案:

答案 0 :(得分:33)

您可以尝试反转颜色的十六进制值。因此#FFFFFF变为#000000#AAAAAA变为#555555。当然,当你有#888888时,这种方法就会失败,当你倒置时,会给你#777777(它们的对比度不大)。

blog post描述了另一种方式(它们仅使用黑色或白色作为前景色,具体取决于背景颜色)。我把它翻译成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)
    };
}