如何根据背景颜色来决定白色或黑色的字体颜色？
我想展示一些类似于这个例子的图片
填充颜色由数据库中具有十六进制颜色的字段决定(例如:ClassX ->颜色：#66FFFF)。现在，我想用选定的颜色(如上图)在填充上显示数据，但我需要知道颜色是暗还是亮，这样我才能知道单词应该是白色还是黑色。有什么办法吗？tks
回答 24
Stack Overflow用户
发布于 2010-10-15 22:11:25
在我的answer to a similar question上构建。
您需要将十六进制代码分解为3个部分，以获得单独的红色、绿色和蓝色强度。代码的每两位表示十六进制(基数16)表示法中的一个值。我不会在这里深入讨论转换的细节，它们很容易查找。
一旦获得了各个颜色的强度，就可以确定颜色的整体强度并选择相应的文本。
if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff186的门槛是基于理论，但可以根据口味进行调整。根据评论，低于150的门槛可能更适合你。
编辑：上面的方法很简单，而且运行得相当好，在StackOverflow这里似乎有很好的接受度。然而，下面的一条评论表明，在某些情况下，这可能会导致不遵守W3C指南。在此，我推导出一种修改后的形式，它总是根据准则选择最高的对比度。如果您不需要遵守W3C规则，那么我将坚持使用上面更简单的公式。
在W3C Recommendations中给出的对比度公式是(L1 + 0.05) / (L2 + 0.05)，其中L1是最亮颜色的亮度，L2是最暗颜色的亮度，范围为0.0-1.0。黑色的亮度为0.0，白色的亮度为1.0，因此替换这些值可以确定具有最高对比度的值。如果黑色的对比度大于白色的对比度，请使用黑色，否则使用白色。给定您正在测试的颜色L的亮度，测试结果为：
if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff这在代数上简化为：
if L > sqrt(1.05 * 0.05) - 0.05或者大约是：
if L > 0.179 use #000000 else use #ffffff剩下的唯一事情就是计算L。这个公式也是given in the guidelines的，它看起来像是从sRGB到线性RGB的转换，然后是亮度的ITU-R recommendation BT.709。
for each c in r,g,b:
c = c / 255.0
if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b0.179的阈值不应更改，因为它与W3C指南捆绑在一起。如果你发现结果不是你喜欢的，试试上面更简单的公式。
Stack Overflow用户
发布于 2017-01-06 01:31:59
我不认为这段代码是我写的，因为它不是我写的，但我把它留在这里，让其他人以后很快就能找到：
根据Mark Ransoms的回答，以下是简单版本的代码片段：
function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {
var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
var r = parseInt(color.substring(0, 2), 16); // hexToR
var g = parseInt(color.substring(2, 4), 16); // hexToG
var b = parseInt(color.substring(4, 6), 16); // hexToB
return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?
darkColor : lightColor;
}下面是高级版本的代码片段：
function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {
var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
var r = parseInt(color.substring(0, 2), 16); // hexToR
var g = parseInt(color.substring(2, 4), 16); // hexToG
var b = parseInt(color.substring(4, 6), 16); // hexToB
var uicolors = [r / 255, g / 255, b / 255];
var c = uicolors.map((col) => {
if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
return (L > 0.179) ? darkColor : lightColor;
}要使用它们，只需调用：
var color = '#EEACAE' // this can be any color
pickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');同时，感谢Alx和chetstone。
Stack Overflow用户
发布于 2015-11-24 18:16:09
这个(JavaScript代码)怎么样？
/**
* Get color (black/white) depending on bgColor so it would be clearly seen.
* @param bgColor
* @returns {string}
*/
getColorByBgColor(bgColor) {
if (!bgColor) { return ''; }
return (parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2) ? '#000' : '#fff';
}https://stackoverflow.com/questions/3942878
复制相似问题
腾讯云开发者
