根据背景色确定字体颜色

我遇到了类似的问题。我必须找到一种选择对比字体颜色的好方法来在色阶/热图上显示文本标签。它必须是通用的方法,生成的颜色必须是“好看的”,这意味着简单的生成互补色不是很好的解决方案-有时它生成奇怪的,非常密集的颜色,很难观察和阅读。

经过长时间的测试,并试图解决这个问题,我发现最好的解决办法是选择白色字体为“暗”色,黑色字体为“亮”色。

下面是我在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/

谢谢你 @加切克 . 以下是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;
}

以防有人想要一个简短的,也许更容易理解的版本 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 值(使明亮的颜色具有更高的值,这对我来说更自然,也是“默认”的计算方法)。

我使用了和gacek相同的常量 here 因为他们为我工作得很好。

(您也可以将此实现为 Extension Method 使用以下签名:

public static Color ContrastColor(this Color iColor)

然后你可以通过 foregroundColor = background.ContrastColor() )

我迅速执行了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;

丑蟒蛇,如果你不想写的话:)

'''
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 将十六进制颜色代码转换为RGB。

所以我要分享它。

我想在给定背景十六进制颜色的情况下使用这个函数,但并不总是从“”开始。

//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;
}

目标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
}

如果你在操纵色彩空间以获得视觉效果,那么在HSL(色调、饱和度和亮度)中通常比在RGB中更容易操作。在RGB中移动颜色以产生自然的令人愉悦的效果在概念上是相当困难的,而转换成HSL、在那里操作、然后再转换回来在概念上更直观,并且总是能产生更好的效果。

维基百科有 good introduction 到HSL和密切相关的HSV。网络周围有免费的代码来进行转换(例如 here is a javascript implementation )

你所使用的精确变换是一个品味问题,但我个人认为,逆转色调和亮度的成分,肯定会产生一个良好的高对比度颜色作为第一近似值,但你可以很容易地获得更微妙的效果。

您可以在任何色调背景上使用任何色调文本,并确保其清晰可见。我总是这么做。在javascript中有一个公式 Readable Text in Colour – STW* 正如它在链接上所说,公式是反伽玛调整计算的一个变化,尽管IMHO更易于管理。 链接右侧的菜单及其相关页面使用随机生成的文本和背景颜色,始终清晰可见。所以是的,很明显这是可以做到的,没问题。

作为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
}

一个Android变体,它也捕获了alpha。

(谢谢@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);
}

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 是一个更好的查询测试台吗?