我正在绘制一个颜色选择按钮，我正在寻找一个漂亮而简单的公式来为 RGB 中的给定背景颜色获得良好的文本颜色（前景）。
一个简单的尝试是只取补色，但这会为纯蓝色或纯红色等颜色生成一个奇怪的按钮。
有没有众所周知的事情可以做到这一点？
如果这很重要，我正在使用 QT。
问问题
53363 次
9 回答
133
为了获得最大的易读性，您需要最大的亮度对比度，而不会陷入无法协同工作的色调。最一致的方法是坚持使用黑色或白色作为文本颜色。你也许可以想出更美观的方案，但没有一个更清晰易读。
要在黑色或白色之间进行选择，您需要知道背景的亮度。由于两个因素，这变得有点复杂：
单个原色红色、绿色和蓝色的感知亮度并不相同。我能给出的最快建议是使用传统公式将 RGB 转换为灰色 - R*0.299 + G*0.587 + B*0.114。还有很多其他的公式。
应用于显示器的伽马曲线使中间灰度值高于您的预期。这很容易通过使用 186 而不是 128 作为中间值来解决。任何小于 186 的都应该使用白色文本，任何大于 186 的都应该使用黑色文本。
于 2009-06-03T19:38:53.817 回答
11
我不是 RGB 相关编程方面的专家，但从设计师的角度来看，通常最易读的颜色只是颜色较浅（如果背景颜色较暗）或更暗（如果背景颜色较浅）的版本相同的阴影。
基本上你会取你的 RGB 值，如果它们更接近 0（暗），你会为你的前景色将它们每一个推上等量，反之亦然，如果它是一个浅色 BG。
为了可读性，补色实际上会让眼睛很痛苦。
于 2009-06-03T19:09:33.300 回答
9
利用大纲提高可读性
如果在用户选择时通过“良好的文本颜色（前景）”将其用于易读性any background colour目的，则始终可以生成具有黑色轮廓的白色文本。它可以在任何纯色、图案或渐变背景上清晰可见，从黑色到白色以及介于两者之间的任何东西。
即使这没有达到您的意图，我认为值得在这里发布，因为我来寻找类似的解决方案。
于 2011-03-27T23:48:34.833 回答
5
基于 Mark 的响应，这里有一些 Ruby 代码可以完成这项工作
rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"
于 2014-07-17T18:12:01.063 回答
3
亮度差异较大时您会更好。一般来说，带有彩色文本的彩色背景会降低可读性，随着时间的推移会伤害眼睛。带有黑色文本的浅色（例如，HSB，S~10%，B>90%）可以正常工作，或者黑色背景上的浅色文本效果很好。我会远离两种颜色。在白色背景上带有微妙色彩的深色文本（b~30%，s>50%）也可以。深蓝色背景上的黄色（琥珀色）文本具有出色的可读性，黑色上的琥珀色或绿色也是如此。这就是为什么旧的哑词（vt100、vt52 等）选择这些颜色的原因。
如果你真的需要为“外观”做颜色上的颜色，你可以反转 H 和 B，同时将饱和度固定在中等到低的水平。
最后一点：如果您有 50% 的灰色背景，请重新考虑您的界面。你正在抢夺你一半的动态范围！您正在疏远低知名度的用户，包括 35 岁以上的任何人...
于 2009-06-03T19:24:47.857 回答
2
如果不仔细选择，颜色组合通常看起来很糟糕。为什么不使用白色或黑色作为文本，取决于颜色的亮度。（需要先转换为 HSB。）
或者让用户选择黑色或白色文本。
或者使用预定义的组合。这就是谷歌在他们的日历产品中所做的。
于 2009-06-03T19:20:49.003 回答
1
我一直在寻找一个 simailr 的答案，并遇到了这篇文章和其他一些我认为我会分享的帖子。根据http://juicystudio.com/services/luminositycontrastratio.php#specify “WCAG 2.0 的成功标准 1.4.3 要求文本的视觉呈现和文本图像的对比度至少为 4.5:1”，其中一些例外。该站点允许您输入前景色和背景色来计算它们的对比度，尽管如果它会建议替代品或范围会很有帮助。
我发现的用于可视化颜色对比度的最佳网站之一是http://colorizer.org/它可以让您同时调整几乎所有方式的色标（RGB、CMYK 等），然后显示结果在屏幕上，例如黄色背景上的白色文本。
于 2014-03-24T14:34:59.983 回答
0
我通常看补色，他们也有补色轮来帮助
http://www.makart.com/resources/artclass/cwheel.html
如果您的颜色是 HSL，请将色相翻转 180 度以获得不错的计算
于 2009-06-03T19:10:21.147 回答
-1
我认为转换为 HSV 可能是一种方式，但 IMO 改变色调看起来很奇怪。我会尝试保持色调并调整值和饱和度（浅红色按钮和深红色文本......嗯听起来很可怕:-)）。
于 2009-06-03T19:16:35.360 回答