我使用这个JavaScript函数将rgb/rgba转换为“白色”或“黑色”。

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

你可以输入这些格式中的任何一种它会输出"黑"或"白"

rgb (255,255,255) rgba (255,255,255,0.1) 色彩:rgba (255,255,255,0.1) 255,255,255,0.1

根据来自链接的不同输入，使前景颜色黑色或白色取决于背景和这个线程，我为颜色做了一个扩展类，为您提供所需的对比色。

代码如下:

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

马克的详细回答非常有用。下面是一个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])来获得白色或黑色。

我从来没有做过这样的事情，但是写一个函数来检查每个颜色的值与十六进制7F (FF / 2)的中位数颜色。如果三种颜色中有两种大于7F，那么你正在使用较深的颜色。

以我对类似问题的回答为基础。

您需要将十六进制代码分解为3个部分，以获得单独的红色、绿色和蓝色强度。代码的每两个数字代表一个十六进制(以16为基数)表示法的值。这里我就不详细讲了，它们很容易查到。

一旦有了各个颜色的强度，就可以确定颜色的整体强度并选择相应的文本。

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

186的阈值是基于理论的，但可以根据口味进行调整。根据评论，低于150的阈值可能更适合您。

Edit: The above is simple and works reasonably well, and seems to have good acceptance here at StackOverflow. However, one of the comments below shows it can lead to non-compliance with W3C guidelines in some circumstances. Herewith I derive a modified form that always chooses the highest contrast based on the guidelines. If you don't need to conform to W3C rules then I'd stick with the simpler formula above. For an interesting look into the problems with this see Contrast Ratio Math and Related Visual Issues.

The formula given for contrast in the W3C Recommendations (WCAG 2.0) is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lightest color and L2 is the luminance of the darkest on a scale of 0.0-1.0. The luminance of black is 0.0 and white is 1.0, so substituting those values lets you determine the one with the highest contrast. If the contrast for black is greater than the contrast for white, use black, otherwise use white. Given the luminance of the color you're testing as L the test becomes:

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.04045 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指南相关联。如果你发现结果不是你喜欢的，试试上面更简单的公式。

除了算术解决方案，还可以使用人工智能神经网络。这样做的好处是，你可以根据自己的口味和需求来定制它。灰白色的文字在明亮的饱和红色上看起来很好，和黑色一样可读)。

下面是一个简洁的Javascript演示，演示了这个概念。你也可以在演示中生成自己的JS公式。

https://harthur.github.io/brain/

下面是一些帮助我解决这个问题的图表。 在第一个图表中，亮度是一个常数128，而色调和饱和度变化。在第二张图中，饱和度是恒定的255，而色调和亮度变化。