我想展示一些像这个例子这样的图像
填充颜色由数据库中的一个字段决定，颜色为十六进制（例如：ClassX -> 颜色：#66FFFF）。现在，我想用所选颜色在填充上方显示数据（如上图所示），但我需要知道颜色是深还是浅，所以我知道这些词应该是白色还是黑色。有办法吗？tks
问问题
94402 次
24 回答
466
基于我对类似问题的回答。
您需要将十六进制代码分成 3 部分以获得单独的红色、绿色和蓝色强度。代码的每 2 位数字代表一个十六进制（base-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:
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 * b
不应更改 0.179 的阈值，因为它与 W3C 指南相关联。如果您发现结果不符合您的喜好，请尝试上述更简单的公式。
于 2010-10-15T14:11:24.650 回答
62
我不相信这段代码，因为它不是我的，但我把它留在这里供其他人在未来快速找到：
根据 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。
于 2017-01-05T17:31:58.530 回答
23
这个（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';
}
于 2015-11-24T10:16:09.243 回答
20
除了算术解决方案之外，还可以使用 AI 神经网络。优点是您可以根据自己的口味和需要对其进行定制（即，明亮饱和的红色上的灰白色文本看起来不错，并且与黑色一样可读）。
这是一个简洁的 Javascript 演示，说明了这个概念。您还可以在演示中生成自己的 JS 公式。
https://harthur.github.io/brain/
下面是一些帮助我解决问题的图表。在第一个图表中，亮度是一个常数 128，而色调和饱和度变化。在第二张图表中，饱和度是一个常数 255，而色调和亮度变化。
于 2017-09-28T13:17:29.643 回答
8
这是我在 Java for Android 中的解决方案：
// Put this method in whichever class you deem appropriate
// static or non-static, up to you.
public static int getContrastColor(int colorIntValue) {
int red = Color.red(colorIntValue);
int green = Color.green(colorIntValue);
int blue = Color.blue(colorIntValue);
double lum = (((0.299 * red) + ((0.587 * green) + (0.114 * blue))));
return lum > 186 ? 0xFF000000 : 0xFFFFFFFF;
}
// Usage
// If Color is represented as HEX code:
String colorHex = "#484588";
int color = Color.parseColor(colorHex);
// Or if color is Integer:
int color = 0xFF484588;
// Get White (0xFFFFFFFF) or Black (0xFF000000)
int contrastColor = WhateverClass.getContrastColor(color);
于 2016-08-19T05:42:57.420 回答
8
如果像我一样，您正在寻找一个考虑 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";
}
于 2019-10-17T08:17:47.163 回答
6
根据@MarkRansom 的回答，我创建了一个PHP 脚本，您可以在这里找到：
function calcC($c) {
if ($c <= 0.03928) {
return $c / 12.92;
}
else {
return pow(($c + 0.055) / 1.055, 2.4);
}
}
function cutHex($h) {
return ($h[0] == "#") ? substr($h, 1, 7) : $h;
}
function hexToR($h) {
return hexdec(substr(cutHex($h), 0, 2));
}
function hexToG($h) {
return hexdec(substr(cutHex($h), 2, 2)); // Edited
}
function hexToB($h) {
return hexdec(substr(cutHex($h), 4, 2)); // Edited
}
function computeTextColor($color) {
$r = hexToR($color);
$g = hexToG($color);
$b = hexToB($color);
$uicolors = [$r / 255, $g / 255, $b / 255];
$c = array_map("calcC", $uicolors);
$l = 0.2126 * $c[0] + 0.7152 * $c[1] + 0.0722 * $c[2];
return ($l > 0.179) ? '#000000' : '#ffffff';
}
于 2017-02-03T12:38:17.207 回答
6
这是作为 UIColor 扩展的 Mark Ransom 答案的快速版本
extension UIColor {
// Get the rgba components in CGFloat
var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
getRed(&red, green: &green, blue: &blue, alpha: &alpha)
return (red, green, blue, alpha)
}
/// Return the better contrasting color, white or black
func contrastColor() -> UIColor {
let rgbArray = [rgba.red, rgba.green, rgba.blue]
let luminanceArray = rgbArray.map({ value -> (CGFloat) in
if value < 0.03928 {
return (value / 12.92)
} else {
return (pow( (value + 0.55) / 1.055, 2.4) )
}
})
let luminance = 0.2126 * luminanceArray[0] +
0.7152 * luminanceArray[1] +
0.0722 * luminanceArray[2]
return luminance > 0.179 ? UIColor.black : UIColor.white
} }
于 2018-08-28T15:28:08.360 回答
2
这只是一个示例，它会在单击元素时更改 SVG 复选标记的颜色。它将根据单击元素的背景颜色将复选标记颜色设置为黑色或白色。
checkmarkColor: function(el) {
var self = el;
var contrast = function checkContrast(rgb) {
// @TODO check for HEX value
// Get RGB value between parenthesis, and remove any whitespace
rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, '');
// map RGB values to variables
var r = parseInt(rgb.split(',')[0], 10),
g = parseInt(rgb.split(',')[1], 10),
b = parseInt(rgb.split(',')[2], 10),
a;
// if RGBA, map alpha to variable (not currently in use)
if (rgb.split(',')[3] !== null) {
a = parseInt(rgb.split(',')[3], 10);
}
// calculate contrast of color (standard grayscale algorithmic formula)
var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;
return (contrast >= 128) ? 'black' : 'white';
};
$('#steps .step.color .color-item .icon-ui-checkmark-shadow svg').css({
'fill': contrast($(self).css('background-color'))
});
}
onClickExtColor: function(evt) {
var self = this;
self.checkmarkColor(evt.currentTarget);
}
于 2015-10-20T21:57:23.967 回答
2
我使用这个 JavaScript 函数将rgb/转换rgba为'white'or 'black'。
function getTextColor(rgba) {
rgba = rgba.match(/\d+/g);
if ((rgba[0] * 0.299) + (rgba[1] * 0.587) + (rgba[2] * 0.114) > 186) {
return 'black';
} else {
return 'white';
}
}
您可以输入任何这些格式，它会输出'black'或'white'
rgb(255,255,255)rgba(255,255,255,0.1)color:rgba(255,255,255,0.1)255,255,255,0.1
于 2016-09-12T22:29:13.847 回答
2
马克的详细回答效果很好。这是javascript中的一个实现：
function lum(rgb) {
var lrgb = [];
rgb.forEach(function(c) {
c = c / 255.0;
if (c <= 0.03928) {
c = c / 12.92;
} else {
c = Math.pow((c + 0.055) / 1.055, 2.4);
}
lrgb.push(c);
});
var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
return (lum > 0.179) ? '#000000' : '#ffffff';
}
然后可以调用这个函数lum([111, 22, 255])来获得白色或黑色。
于 2018-06-26T03:02:19.073 回答
2
这是我自己的方法，我一直在使用，到目前为止还没有问题
function hexToRgb(hex) {
const hexCode = hex.charAt(0) === '#'
? hex.substr(1, 6)
: hex;
const hexR = parseInt(hexCode.substr(0, 2), 16);
const hexG = parseInt(hexCode.substr(2, 2), 16);
const hexB = parseInt(hexCode.substr(4, 2), 16);
// Gets the average value of the colors
const contrastRatio = (hexR + hexG + hexB) / (255 * 3);
return contrastRatio >= 0.5
? 'black'
: 'white';
}
于 2019-08-30T05:02:20.997 回答
2
这是 Mark Ransom 答案的 R 版本，仅使用基本 R。
hex_bw <- function(hex_code) {
myrgb <- as.integer(col2rgb(hex_code))
rgb_conv <- lapply(myrgb, function(x) {
i <- x / 255
if (i <= 0.03928) {
i <- i / 12.92
} else {
i <- ((i + 0.055) / 1.055) ^ 2.4
}
return(i)
})
rgb_calc <- (0.2126*rgb_conv[[1]]) + (0.7152*rgb_conv[[2]]) + (0.0722*rgb_conv[[3]])
if (rgb_calc > 0.179) return("#000000") else return("#ffffff")
}
> hex_bw("#8FBC8F")
[1] "#000000"
> hex_bw("#7fa5e3")
[1] "#000000"
> hex_bw("#0054de")
[1] "#ffffff"
> hex_bw("#2064d4")
[1] "#ffffff"
> hex_bw("#5387db")
[1] "#000000"
于 2020-04-27T19:19:29.537 回答
2
我正在使用也可以完成这项工作的tinyColor 库。
import { TinyColor } from '@ctrl/tinycolor'
// ...
getColorContrast(color = '#66FFFF'): string {
if(new TinyColor(color).getLuminance() > 0.179) { // 0.179 -> Mark Ransom answer
return '#000'
} else {
return '#fff'
}
}
这种方法也可以接受 rgb 颜色rgb(102,255,255)
于 2021-04-28T14:16:21.803 回答
1
我从来没有做过这样的事情，但是如何编写一个函数来检查每种颜色的值与 Hex 7F (FF / 2) 的中值颜色的对比。如果三种颜色中有两种大于 7F，那么您正在使用较深的颜色。
于 2010-10-15T14:03:46.977 回答
1
LESS 有一个很好的contrast()功能，对我来说效果很好，请参阅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
}
于 2017-06-19T16:02:37.533 回答
1
从十六进制到黑色或白色：
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
]
: [0, 0, 0];
}
function lum(hex) {
var rgb = hexToRgb(hex)
var lrgb = [];
rgb.forEach(function(c) {
c = c / 255.0;
if (c <= 0.03928) {
c = c / 12.92;
} else {
c = Math.pow((c + 0.055) / 1.055, 2.4);
}
lrgb.push(c);
});
var lum = 0.2126 * lrgb[0] + 0.7152 * lrgb[1] + 0.0722 * lrgb[2];
return lum > 0.179 ? "#000000" : "#ffffff";
}
于 2018-06-28T13:44:56.177 回答
1
基于来自链接Make foregroundcolor black or white 取决于背景和这个线程的不同输入，我为 Color 创建了一个扩展类，为您提供所需的对比色。
代码如下：
public static class ColorExtension
{
public static int PerceivedBrightness(this Color c)
{
return (int)Math.Sqrt(
c.R * c.R * .299 +
c.G * c.G * .587 +
c.B * c.B * .114);
}
public static Color ContrastColor(this Color iColor, Color darkColor,Color lightColor)
{
// Counting the perceptive luminance (aka luma) - human eye favors green color...
double luma = (iColor.PerceivedBrightness() / 255);
// Return black for bright colors, white for dark colors
return luma > 0.5 ? darkColor : lightColor;
}
public static Color ContrastColor(this Color iColor) => iColor.ContrastColor(Color.Black);
public static Color ContrastColor(this Color iColor, Color darkColor) => iColor.ContrastColor(darkColor, Color.White);
// Converts a given Color to gray
public static Color ToGray(this Color input)
{
int g = (int)(input.R * .299) + (int)(input.G * .587) + (int)(input.B * .114);
return Color.FromArgb(input.A, g, g, g);
}
}
于 2018-10-31T08:09:42.457 回答
1
我根据@SudoPlz 提出的高级功能做了一个功能，它还考虑了浅色和深色：
function getTextColor (bgColor, lightColor = '#FFFFFF', darkColor = '#000000') {
const getLuminance = function (hexColor) {
var color = (hexColor.charAt(0) === '#') ? hexColor.substring(1, 7) : hexColor
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 => col <= 0.03928 ? col / 12.92 : ((col + 0.055) / 1.055) ** 2.4)
return (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
}
var L = getLuminance(bgColor)
var L1 = getLuminance(lightColor)
var L2 = getLuminance(darkColor)
return (L > Math.sqrt((L1 + 0.05) * (L2 + 0.05)) - 0.05) ? darkColor : lightColor;
}
因此，如果深色文本不是黑色而是栗色，则推荐的灰色背景上的文本颜色变为白色：
getTextColor('#808080')
"#000000"
getTextColor('#808080', '#FFFFFF', '#800000')
"#FFFFFF"
于 2021-07-06T16:43:45.663 回答
0
@SoBiT，我在看你的答案，看起来不错，但有一个小错误。您的函数 hexToG 和 hextoB 需要稍作修改。substr 中的最后一个数字是字符串的长度，因此在这种情况下它应该是“2”，而不是 4 或 6。
function hexToR($h) {
return hexdec(substr(cutHex($h), 0, 2));
}
function hexToG($h) {
return hexdec(substr(cutHex($h), 2, 2));
}
function hexToB($h) {
return hexdec(substr(cutHex($h), 4, 2));
}
于 2017-04-25T15:54:39.220 回答
0
基于 Mark 回答的 iOS 的 Objective-c 版本代码：
- (UIColor *)contrastForegroundColor {
CGFloat red = 0, green = 0, blue = 0, alpha = 0;
[self getRed:&red green:&green blue:&blue alpha:&alpha];
NSArray<NSNumber *> *rgbArray = @[@(red), @(green), @(blue)];
NSMutableArray<NSNumber *> *parsedRGBArray = [NSMutableArray arrayWithCapacity:rgbArray.count];
for (NSNumber *item in rgbArray) {
if (item.doubleValue <= 0.03928) {
[parsedRGBArray addObject:@(item.doubleValue / 12.92)];
} else {
double newValue = pow((item.doubleValue + 0.055) / 1.055, 2.4);
[parsedRGBArray addObject:@(newValue)];
}
}
double luminance = 0.2126 * parsedRGBArray[0].doubleValue + 0.7152 * parsedRGBArray[1].doubleValue + 0.0722 * parsedRGBArray[2].doubleValue;
return luminance > 0.179 ? UIColor.blackColor : UIColor.whiteColor;
}
于 2018-07-29T01:02:05.253 回答
0
用所有 24 位颜色进行测试怎么样？
请注意，假设阈值为 128，YIQ 方法将返回 1.9:1 的最小对比度，这不会通过 AA 和 AAA WCAG2.0 测试。
对于 W3C 方法，它将返回 4.58:1 的最小对比度，大文本通过 AA 和 AAA 测试，小文本通过 AA 测试，它不会通过每种颜色的小文本 AAA 测试。
于 2019-02-16T17:30:14.927 回答
0
这是我根据 Mark 的惊人回答编写的 Java Swing 代码：
public static Color getColorBasedOnBackground(Color background, Color darkColor, Color lightColor) {
// Calculate foreground color based on background (based on https://stackoverflow.com/a/3943023/)
Color color;
double[] cL = new double[3];
double[] colorRGB = new double[] {background.getRed(), background.getGreen(), background.getBlue()};
for (int i = 0; i < colorRGB.length; i++)
cL[i] = (colorRGB[i] / 255.0 <= 0.03928) ? colorRGB[i] / 255.0 / 12.92 :
Math.pow(((colorRGB[i] / 255.0 + 0.055) / 1.055), 2.4);
double L = 0.2126 * cL[0] + 0.7152 * cL[1] + 0.0722 * cL[2];
color = (L > Math.sqrt(1.05 * 0.05) - 0.05) ? darkColor : lightColor;
return color;
}
于 2020-04-22T21:27:52.103 回答
0
接受的答案在使用androidx.compose.ui.graphics.Color. luminance()然后我发现Android Jetpack Compose中实际上有一个内置函数，它返回[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
}
}
于 2021-08-20T18:14:53.243 回答