给定一个系统（例如网站），让用户自定义某些部分的背景颜色而不是字体颜色（以保持选项数量最少），有没有办法以编程方式确定“光”或“黑暗的“字体颜色是必要的？
我确定有一些算法，但我对颜色，光度等知之甚少，无法自己解决。
我遇到过类似的问题。我必须找到一种选择对比字体颜色的好方法，以在colorscales / heatmaps上显示文本标签。它必须是通用的方法，生成的颜色必须是“好看的”，这意味着简单的生成互补色不是好的解决方案 - 有时它产生奇怪的，非常密集的颜色，难以观看和阅读。
经过长时间的测试并试图解决这个问题，我发现最好的解决方案是选择白色字体为“深色”，黑色字体为“亮”色。
这是我在C＃中使用的函数示例：
Color ContrastColor(Color color)
{
int d = 0;
// Counting the perceptive luminance - human eye favors green color...
double luminance = ( 0.299 * color.R + 0.587 * color.G + 0.114 * color.B)/255;
if (luminance > 0.5)
d = 0; // bright colors - black font
else
d = 255; // dark colors - white font
return Color.FromArgb(d, d, d);
}
这是为许多不同的颜色（彩虹，灰度，热，冰和许多其他颜色）测试的，是我发现的唯一“通用”方法。
编辑
改变计算a的公式为“感知亮度” - 它真的看起来更好！已经在我的软件中实现它，看起来很棒。
编辑2 @WebSeed提供了这个算法的一个很好的工作示例：http://codepen.io/WebSeed/full/pvgqEq/
+ (UIColor*) getContrastColor:(UIColor*) color {
CGFloat red, green, blue, alpha;
[color getRed:&red green:&green blue:&blue alpha:&alpha];
double a = ( 0.299 * red + 0.587 * green + 0.114 * blue);
return (a > 0.5) ? [[UIColor alloc]initWithRed:0 green:0 blue:0 alpha:1] : [[UIColor alloc]initWithRed:255 green:255 blue:255 alpha:1];
}
iOS Swift 3.0（UIColor扩展）：
func isLight() -> Bool
{
if let components = self.cgColor.components, let firstComponentValue = components[0], let secondComponentValue = components[1], let thirdComponentValue = components[2] {
let firstComponent = (firstComponentValue * 299)
let secondComponent = (secondComponentValue * 587)
let thirdComponent = (thirdComponentValue * 114)
let brightness = (firstComponent + secondComponent + thirdComponent) / 1000
if brightness < 0.5
{
return false
}else{
return true
}
}
print("Unable to grab components and determine brightness")
return nil
}
Swift 4示例：
extension UIColor {
var isLight: Bool {
let components = cgColor.components
let firstComponent = ((components?[0]) ?? 0) * 299
let secondComponent = ((components?[1]) ?? 0) * 587
let thirdComponent = ((components?[2]) ?? 0) * 114
let brightness = (firstComponent + secondComponent + thirdComponent) / 1000
return !(brightness < 0.6)
}
}
更新 - 发现0.6是一个更好的查询测试床
如果您正在操纵色彩空间以获得视觉效果，那么在HSL（色调，饱和度和亮度）中工作通常比使用RGB更容易。在RGB中移动颜色以提供自然令人愉悦的效果往往在概念上非常困难，而转换为HSL，在那里操纵，然后再次转换回来在概念上更直观并且总是提供更好看的结果。
维基百科有一个good introduction到HSL和密切相关的HSV。网上有免费的代码来进行转换（例如here is a javascript implementation）
你使用的精确转换是一个品味的问题，但我个人认为逆转Hue和Lightness组件肯定会产生一个良好的高对比度颜色作为第一个近似，但你可以轻松地获得更微妙的效果。
您可以在任何色调背景上添加任何色调文本，并确保其清晰易读。我一直这样做。在Readable Text in Colour – STW*的Javascript中有一个公式正如它在该链接上所说的那样，该公式是反伽玛调整计算的变体，虽然更容易管理恕我直言。该链接右侧的菜单及其相关页面使用随机生成的文本和背景颜色，始终清晰可辨。所以是的，显然它可以做到，没问题。
作为Kotlin / Android扩展：
fun Int.getContrastColor(): Int {
// Counting the perceptive luminance - human eye favors green color...
val a = 1 - (0.299 * Color.red(this) + 0.587 * Color.green(this) + 0.114 * Color.blue(this)) / 255
return if (a < 0.5) Color.BLACK else Color.WHITE
}
也可以捕获alpha的Android变体。
（感谢@ thomas-vos）
/**
* Returns a colour best suited to contrast with the input colour.
*
* @param colour
* @return
*/
@ColorInt
public static int contrastingColour(@ColorInt int colour) {
// XXX https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(colour) + 0.587 * Color.green(colour) + 0.114 * Color.blue(colour)) / 255;
int alpha = Color.alpha(colour);
int d = 0; // bright colours - black font;
if (a >= 0.5) {
d = 255; // dark colours - white font
}
return Color.argb(alpha, d, d, d);
}
颤振实施
Color contrastColor(Color color) {
if (color == Colors.transparent || color.alpha < 50) {
return Colors.black;
}
double luminance = (0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;
return luminance > 0.5 ? Colors.black : Colors.white;
}
以防有人想要更短，更容易理解的GaceK's answer版本：
public Color ContrastColor(Color iColor)
{
// Calculate the perceptive luminance (aka luma) - human eye favors green color...
double luma = ((0.299 * iColor.R) + (0.587 * iColor.G) + (0.114 * iColor.B)) / 255;
// Return black for bright colors, white for dark colors
return luma > 0.5 ? Color.Black : Color.White;
}
注意：我删除了luma值的反转（使明亮的颜色具有更高的值，对我来说似乎更自然，也是'默认'计算方法。
我使用与here的GaceK相同的常量，因为它们对我很有用。
（您也可以使用以下签名将其实现为Extension Method：
public static Color ContrastColor(this Color iColor)
然后你可以通过foregroundColor = background.ContrastColor()来调用它。）
谢谢@Gacek。这是Android版本：
@ColorInt
public static int getContrastColor(@ColorInt int color) {
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;
int d;
if (a < 0.5) {
d = 0; // bright colors - black font
} else {
d = 255; // dark colors - white font
}
return Color.rgb(d, d, d);
}
一个改进的（更短）版本：
@ColorInt
public static int getContrastColor(@ColorInt int color) {
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;
return a < 0.5 ? Color.BLACK : Color.WHITE;
}
我的Swift实施Gacek的答案：
func contrastColor(color: UIColor) -> UIColor {
var d = CGFloat(0)
var r = CGFloat(0)
var g = CGFloat(0)
var b = CGFloat(0)
var a = CGFloat(0)
color.getRed(&r, green: &g, blue: &b, alpha: &a)
// Counting the perceptive luminance - human eye favors green color...
let luminance = 1 - ((0.299 * r) + (0.587 * g) + (0.114 * b))
if luminance < 0.5 {
d = CGFloat(0) // bright colors - black font
} else {
d = CGFloat(1) // dark colors - white font
}
return UIColor( red: d, green: d, blue: d, alpha: a)
}
Javascript [ES2015]
const hexToLuma = (colour) => {
const hex = colour.replace(/#/, '');
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
return [
0.299 * r,
0.587 * g,
0.114 * b
].reduce((a, b) => a + b) / 255;
};
这是一个非常有用的答案。谢谢！
我想分享一个SCSS版本：
@function is-color-light( $color ) {
// Get the components of the specified color
$red: red( $color );
$green: green( $color );
$blue: blue( $color );
// Compute the perceptive luminance, keeping
// in mind that the human eye favors green.
$l: 1 - ( 0.299 * $red + 0.587 * $green + 0.114 * $blue ) / 255;
@return ( $l < 0.5 );
}
现在弄清楚如何使用该算法自动创建菜单链接的悬停颜色。灯头变得更暗，反之亦然。
谢谢你的这篇文章。
对于可能感兴趣的人，这是Delphi中该函数的一个示例：
function GetContrastColor(ABGColor: TColor): TColor;
var
ADouble: Double;
R, G, B: Byte;
begin
if ABGColor <= 0 then
begin
Result := clWhite;
Exit; // *** EXIT RIGHT HERE ***
end;
if ABGColor = clWhite then
begin
Result := clBlack;
Exit; // *** EXIT RIGHT HERE ***
end;
// Get RGB from Color
R := GetRValue(ABGColor);
G := GetGValue(ABGColor);
B := GetBValue(ABGColor);
// Counting the perceptive luminance - human eye favors green color...
ADouble := 1 - (0.299 * R + 0.587 * G + 0.114 * B) / 255;
if (ADouble < 0.5) then
Result := clBlack // bright colors - black font
else
Result := clWhite; // dark colors - white font
end;
丑陋的Python，如果你不喜欢写它:)
'''
Input a string without hash sign of RGB hex digits to compute
complementary contrasting color such as for fonts
'''
def contrasting_text_color(hex_str):
(r, g, b) = (hex_str[:2], hex_str[2:4], hex_str[4:])
return '000' if 1 - (int(r, 16) * 0.299 + int(g, 16) * 0.587 + int(b, 16) * 0.114) / 255 < 0.5 else 'fff'
我有同样的问题，但我不得不用PHP开发它。我使用了@ Garek的solution，我也使用了这个答案：Convert hex color to RGB values in PHP将HEX颜色代码转换为RGB。
所以我正在分享它。
我想在给定的背景HEX颜色下使用此功能，但并不总是从'＃'开始。
//So it can be used like this way:
$color = calculateColor('#804040');
echo $color;
//or even this way:
$color = calculateColor('D79C44');
echo '<br/>'.$color;
function calculateColor($bgColor){
//ensure that the color code will not have # in the beginning
$bgColor = str_replace('#','',$bgColor);
//now just add it
$hex = '#'.$bgColor;
list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
$color = 1 - ( 0.299 * $r + 0.587 * $g + 0.114 * $b)/255;
if ($color < 0.5)
$color = '#000000'; // bright colors - black font
else
$color = '#ffffff'; // dark colors - white font
return $color;
}