Javascript 自动更改文本颜色以确保可读性

用户可以通过接受RGB十六进制表示法的文本框设置按钮的背景色：

ff00ff

、

ccaa22

，等等。因此我需要将文本颜色设置为相反的颜色。不确定术语（相反的颜色），但想法是确保可读性。

您可以使用这个简单的模式来实现这一目标。只需将颜色从RGB转换为HSV格式。你可以用这个。 然后使用这个伪代码

rr = (color>>16)&0xFF;
gg = (color>>8)&0xFF;
bb = color & 0xFF;

someBrightColor = 0xFFFFFF;
someDarkColor = 0x000000;

hsvColor = rgbToHsv( rr, gg, bb );
//
//hsv is array: [h,s,v]...all values in [0,1]
//
//color is from dark range, if hsv < 0.5, so we need bright color to draw text, because    in dark color bright color 'will be more visible'.  
if( hsvColor[2] <= 0.5 )
  textColor = someBrightColor ;
//this is opposite case , when in more bright color, the dark color 'will be more visible'
else
  textColor = someDarkColor ;

rr=（颜色>>16）&0xFF；
gg=（颜色>>8）&0xFF；
bb=颜色&0xFF；
someBrightColor=0xFFFFFF；
someDarkColor=0x000000；
HSV颜色=rgbToHsv（rr，gg，bb）；
//
//hsv是数组：[h，s，v]…所有值都在[0,1]中
//
//颜色是从黑暗的范围，如果hsv<0.5，所以我们需要明亮的颜色来绘制文本，因为在黑暗的颜色中，明亮的颜色“将更可见”。
如果（hsvColor[2]我在评论中将另一个问题与此主题联系起来。


正如Tejasva所说，您需要将RGB转换为HSL，补充色调并将其转换回来

我将链接答案作为一个示例来实现。如果这对您有帮助，请更新原始海报，因为它们实际上提供了解决方案

样本

您可以反转背景色并将其用作前景色。以下算法生成的结果与Photoshop中的“图像>调整>反转”颜色命令相同：


函数反转颜色（hexTripletColor）{
var color=hexTripletColor；
color=color.substring（1）；//删除#
color=parseInt（color，16）；//转换为整数
color=0xFFFFFF^color；//反转三个字节
color=color.toString（16）；//转换为十六进制
color=（“000000”+color）.slice（-6）；//用前导零填充
color=“#”+color；//预结束#
返回颜色；
}
/*
*示范
*/
函数randomColor（）{
颜色变异；
color=Math.floor（Math.random（）*0x1000000）；//0x0和0xFFFF之间的整数
color=color.toString（16）；//转换为十六进制
color=（“000000”+color）.slice（-6）；//用前导零填充
color=“#”+color；//预结束#
返回颜色；
}
$（函数（）{
$（“.demolist li”）。每个（函数（）{
var c1=随机颜色（）；
var c2=反转颜色（c1）；
$（this）.text（c1+“”+c2）.css({
“颜色”：c1，
“背景色”：c2
});
});
})；
body{font:bold-medium-monospace；}
.demolist{margin:0；padding:0；列表样式类型：无；溢出：隐藏；}
.demolist li{float:left；宽度：5em；高度：5em；文本对齐：居中；}


























这里有一个非常小的方法来补充十六进制值
//十六进制值，如“aa00cc”

函数补码十六进制（hexValue）{
var reqHex=“”；
对于（var i=0；i来说，参加聚会有点晚，但我认为所有文本都应该是浅色或深色。彩色文本用于链接

我编写了一个coffeescript函数来决定使用哪个函数：

is_light = (hex_color) ->
  c = hex_color.replace(/^#/,'')
  sum = parseInt(c[0]+c[1], 16)
  sum += parseInt(c[2]+c[3], 16)
  sum += parseInt(c[4]+c[5], 16)  
  log "sum is #{sum}"
  sum > 382.6

萨拉曼的代码是好的，但有时他的反转不够可读。
我使用，只是改变灰度

function invertColor(rgb) {
    var yuv = rgb2yuv(rgb);
    var factor = 180;
    var threshold = 100;
    yuv.y = clamp(yuv.y + (yuv.y > threshold ? -factor : factor));
    return yuv2rgb(yuv);
}

我曾经遇到过同样的问题，并且在互联网上收集信息也使用了Salman A答案，我想出了这个函数，它支持十六进制、rgb和rgba

var invertColor = function (color) {
            var hex   = '#';
            if(color.indexOf(hex) > -1){
                color = color.substring(1);           
                color = parseInt(color, 16);         
                color = 0xFFFFFF ^ color;            
                color = color.toString(16);           
                color = ("000000" + color).slice(-6); 
                color = "#" + color; 
            }else{
                color = Array.prototype.join.call(arguments).match(/(-?[0-9\.]+)/g);
                for (var i = 0; i < color.length; i++) {
                    color[i] = (i === 3 ? 1 : 255) - color[i];
                }
                if(color.length === 4){
                    color = "rgba("+color[0]+","+color[1]+","+color[2]+","+color[3]+")";
                }else{
                    color = "rgb("+color[0]+","+color[1]+","+color[2]+")";
                }
            }         
            return color;
        }

我不认为这是我的功劳，我只是得到了灵感，并根据自己的需要进行了修改

资料来源：

var getContractyIQ=函数（颜色）{
var hex='#'；
var r，g，b；
if（颜色索引（十六进制）>-1）{
r=parseInt（color.substr（1,2,16））；
g=parseInt（color.substr（3,2,16））；
b=parseInt（color.substr（5,2,16））；
}否则{
颜色=颜色。匹配（/\d+/g）；
r=颜色[0]；
g=颜色[1]；
b=颜色[2]；
}
var yiq=（（r*299）+（g*587）+（b*114））/1000；
返回（yiq>=128）？“黑色”：白色；
}
这将帮助您：需要做的是将此RGB转换为HSL，补充色调（色调=色调+180mod360），并将其转换回RGB…查找转换代码@smamatti&&tejasva dhyani：我正在研究这两种解决方案。似乎很有希望。谢谢！实际上，这是十六进制值的15补数…我不知道它是否有效。
rgbToHsv（）函数
接受十进制表示法
[0255]
不是十六进制。但是假设我能翻译，我真的不理解你的伪代码。请再解释一点。THX！非常清楚。好的。我会实现所有内容并通知你。同时，对这项工作投赞成票，THX！这是一个示例/演示。我想任何人都可以很容易地添加颜色是黑色还是白色的检查。this算法在某些颜色上失败。例如，它在红色（#FF0000）上失败。文本不可读。似乎在
invertColor
函数中将
因子更改为180，它会看起来很棒！你是如何想出382.6的？：）该死，这是一个很好的例子！适用于大多数颜色，但正如上面的注释所示，并非所有颜色都适用。对于灰色（#7F7F7F），它返回（#808080），这几乎是相同的。“接近但没有雪茄”：（不幸的是，这与上面的答案有相同的问题，即对大多数颜色都很有效，但正如上面的注释所示，并非所有颜色都有效。对于灰色（#7F7F7F），它返回（#808080），这实际上是相同的。“接近但没有雪茄”：(
var invertColor = function (color) {
            var hex   = '#';
            if(color.indexOf(hex) > -1){
                color = color.substring(1);           
                color = parseInt(color, 16);         
                color = 0xFFFFFF ^ color;            
                color = color.toString(16);           
                color = ("000000" + color).slice(-6); 
                color = "#" + color; 
            }else{
                color = Array.prototype.join.call(arguments).match(/(-?[0-9\.]+)/g);
                for (var i = 0; i < color.length; i++) {
                    color[i] = (i === 3 ? 1 : 255) - color[i];
                }
                if(color.length === 4){
                    color = "rgba("+color[0]+","+color[1]+","+color[2]+","+color[3]+")";
                }else{
                    color = "rgb("+color[0]+","+color[1]+","+color[2]+")";
                }
            }         
            return color;
        }

var getContrastYIQ = function (color){
            var hex   = '#';
            var r,g,b;
            if(color.indexOf(hex) > -1){
                r = parseInt(color.substr(0,2),16);
                g = parseInt(color.substr(2,2),16);
                b = parseInt(color.substr(4,2),16);
            }else{
                color = color.match(/\d+/g);
                r = color[0];
                g = color[1];
                b = color[2];
            }

            var yiq = ((r*299)+(g*587)+(b*114))/1000;
            return (yiq >= 128) ? 'black' : 'white';
        }