我想展示一些像这个例子的图片
填充颜色由数据库中颜色为十六进制的字段决定(例如:ClassX -> color: #66FFFF)。 现在，我想显示上面的数据与所选的颜色填充(如上图)，但我需要知道如果颜色是暗或光，所以我知道如果文字应该在白色或黑色。 有办法吗?谢谢大家
当前回答
我从来没有做过这样的事情，但是写一个函数来检查每个颜色的值与十六进制7F (FF / 2)的中位数颜色。如果三种颜色中有两种大于7F，那么你正在使用较深的颜色。
其他回答
除了算术解决方案，还可以使用人工智能神经网络。这样做的好处是，你可以根据自己的口味和需求来定制它。灰白色的文字在明亮的饱和红色上看起来很好，和黑色一样可读)。
下面是一个简洁的Javascript演示，演示了这个概念。你也可以在演示中生成自己的JS公式。
https://harthur.github.io/brain/
下面是一些帮助我解决这个问题的图表。 在第一个图表中，亮度是一个常数128，而色调和饱和度变化。在第二张图中，饱和度是恒定的255，而色调和亮度变化。
当使用androidx. composer .ui.graphics. color时，接受的答案在Android上从未工作过。然后我发现在Android Jetpack Compose中实际上有内置的luminance()函数，该函数返回[0,1]之间的亮度值。文档说明:“基于WCAG 2.0中定义的相对亮度公式，W3C推荐标准2008年12月11日。”
以下是官方源代码。
使用示例:
fun Color.generateOnColor()
: Color {
return if (luminance() > 0.5f) {
Color.Black.copy(alpha = .8f)
} else {
Color.White
}
}
这个(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';
}
如果你像我一样正在寻找一个考虑alpha的RGBA版本，这里有一个非常好的工作，具有高对比度。
function getContrastColor(R, G, B, A) {
const brightness = R * 0.299 + G * 0.587 + B * 0.114 + (1 - A) * 255;
return brightness > 186 ? "#000000" : "#FFFFFF";
}
LESS有一个很好的对比度()函数，对我来说效果很好，请参阅http://lesscss.org/functions/#color-operations-contrast
“在两种颜色中选择一种颜色与另一种颜色形成最大的对比。 这对于确保颜色在背景下是可读的很有用，这对于可访问性遵从也很有用。此函数的工作方式与Compass for SASS中的对比函数相同。根据WCAG 2.0，颜色是用伽马校正的亮度值来比较的，而不是它们的亮度。”
例子:
p {
a: contrast(#bbbbbb);
b: contrast(#222222, #101010);
c: contrast(#222222, #101010, #dddddd);
d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}
输出:
p {
a: #000000 // black
b: #ffffff // white
c: #dddddd
d: #000000 // black
e: #ffffff // white
}
