如何根据背景颜色确定白色或黑色字体颜色？

Question

我想显示一些像这个例子的图像替代文字

填充颜色由数据库中的字段以十六进制颜色决定（例如：ClassX-> Color：＃66FFFF）。现在，我想在具有所选颜色的填充上方显示数据（如上图所示），但我需要知道颜色是深色还是浅色，因此我知道单词应为白色还是黑色。有办法吗？ks

Answer 1

以我对类似问题的回答为基础。您需要将十六进制代码分成三部分，以获得单独的红色，绿色和蓝色强度。代码的每2位数字以十六进制（基数16）表示。在这里，我将不介绍转换的详细信息，因为它们很容易查找。一旦获得了每种颜色的强度，就可以确定颜色的整体强度并选择相应的文本。if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff阈值186是基于理论的，但可以根据口味进行调整。根据下面的评论，阈值150可能对您更好。编辑：上面的操作很简单，并且运行良好，并且似乎在StackOverflow上得到了很好的接受。但是，以下评论之一表明，在某些情况下，它可能导致不遵守W3C准则的情况。因此，我得出了一个修改后的表格，该表格始终根据准则选择最高的对比度。如果你没有需要遵循W3C规则，那么我会用上述简单的公式坚持。在W3C建议书中(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。准则中也给出了该公式，看起来从sRGB到线性RGB的转换，随后是ITU-R建议BT.709的亮度。for each c in r,g,b:&nbsp; &nbsp; c = c / 255.0&nbsp; &nbsp; if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4L = 0.2126 * r + 0.7152 * g + 0.0722 * b阈值0.179不应更改，因为它与W3C准则有关。如果发现结果不符合您的喜好，请尝试上述更简单的公式。

Answer 2

我不相信此代码，因为它不是我的，但我将其留在此处，以便其他人在将来快速找到：根据Mark Ransoms的答案，这是简单版本的代码段：function pickTextColorBasedOnBgColorSimple(bgColor, lightColor, darkColor) {&nbsp; var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;&nbsp; var r = parseInt(color.substring(0, 2), 16); // hexToR&nbsp; var g = parseInt(color.substring(2, 4), 16); // hexToG&nbsp; var b = parseInt(color.substring(4, 6), 16); // hexToB&nbsp; return (((r * 0.299) + (g * 0.587) + (b * 0.114)) > 186) ?&nbsp; &nbsp; darkColor : lightColor;}这是高级版本的代码片段：function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {&nbsp; var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;&nbsp; var r = parseInt(color.substring(0, 2), 16); // hexToR&nbsp; var g = parseInt(color.substring(2, 4), 16); // hexToG&nbsp; var b = parseInt(color.substring(4, 6), 16); // hexToB&nbsp; var uicolors = [r / 255, g / 255, b / 255];&nbsp; var c = uicolors.map((col) => {&nbsp; &nbsp; if (col <= 0.03928) {&nbsp; &nbsp; &nbsp; return col / 12.92;&nbsp; &nbsp; }&nbsp; &nbsp; return Math.pow((col + 0.055) / 1.055, 2.4);&nbsp; });&nbsp; var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);&nbsp; return (L > 0.179) ? darkColor : lightColor;}要使用它们，只需调用：var color = '#EEACAE' // this can be any colorpickTextColorBasedOnBgColorSimple(color, '#FFFFFF', '#000000');另外，感谢Alx和chetstone。