根据背景颜色确定字体颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据背景颜色确定字体颜色相关的知识,希望对你有一定的参考价值。

给定一个系统(例如网站),让用户自定义某些部分的背景颜色而不是字体颜色(以保持选项数量最少),有没有办法以编程方式确定“光”或“黑暗的“字体颜色是必要的?

我确定有一些算法,但我对颜色,光度等知之甚少,无法自己解决。

答案

我遇到过类似的问题。我必须找到一种选择对比字体颜色的好方法,以在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/

另一答案

objective-c的实现

+ (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 

以上是关于根据背景颜色确定字体颜色的主要内容,如果未能解决你的问题,请参考以下文章

怎么设置Android Studio代码字体及背景颜色

webstorm怎么设置背景颜色

如何更改cmd的背景

如何根据字体颜色选择背景颜色以获得适当的对比度

根据背景颜色反转 CSS 字体颜色

如何根据背景颜色决定字体颜色为白色还是黑色?