1

我在 a 中有一个<p>元素<div>。段落文本有两种可能的颜色：白色或黑色。这种颜色是在运行时随机选择的。背景 div 的颜色是在运行时从 1600 万种颜色中随机选择的。因为这两个过程都是随机的，所以有时相似的颜色最终会在一起，段落文本很难看到或根本看不到。

是否有一种算法可以将两种颜色相互比较并以百分比表示法返回一种颜色在另一种颜色之上的外观？

这个问题是在问两种颜色有多相似：颜色逻辑算法

我想知道一个人叠加在另一个人身上时的样子。例如，根据上面帖子中定义的函数，黄色和白色不是相似的颜色，但是当白色写在黄色上时，不容易看到文字。

4

2 回答 2

1

这个网站应该有帮助：

http://24ways.org/2010/calculating-color-contrast

根据它，使用此函数来确定在 bg 颜色上使用黑色还是白色：

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

当然，您必须将颜色转换为其十六进制值才能使用它们。

于 2012-10-12T02:41:10.973 回答
0

sc-color 库（披露：我是作者）有一个类似的内置函数，称为contrastWhiteBlack().

这是一个JsFiddle 演示，用于在随机背景颜色上生成文本颜色。

核心代码如下所示：

// Parse, generate a contrast color, convert back to a color string
var textColor = sc_color([color string to parse]).contrastWhiteBlack().html();
于 2012-10-12T19:33:45.210 回答