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

Question

用户可以通过接受RGB十六进制格式的文本框设置一个按钮的背景颜色:ff00ff,ccaa22等等.所以我需要设置文本颜色相反.不确定术语(相反的颜色),但这个想法是确保可读性.

Answer 1

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

function invertColor(hexTripletColor) {
    var color = hexTripletColor;
    color = color.substring(1);           // remove #
    color = parseInt(color, 16);          // convert to integer
    color = 0xFFFFFF ^ color;             // invert three bytes
    color = color.toString(16);           // convert to hex
    color = ("000000" + color).slice(-6); // pad with leading zeros
    color = "#" + color;                  // prepend #
    return color;
}
/*
 * Demonstration
 */
function randomColor() {
    var color;
    color = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF
    color = color.toString(16);                    // convert to hex
    color = ("000000" + color).slice(-6);          // pad with leading zeros
    color = "#" + color;                           // prepend #
    return color;
}
$(function() {
    $(".demolist li").each(function() {
        var c1 = randomColor();
        var c2 = invertColor(c1);
        $(this).text(c1 + " " + c2).css({
            "color": c1,
            "background-color": c2
        });
    });
});

body { font: bold medium monospace; }
.demolist { margin: 0; padding: 0; list-style-type: none; overflow: hidden; }
.demolist li { float: left; width: 5em; height: 5em; text-align: center; }

<ul class="demolist">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

请注意,这不是防弹解决方案.接近50%亮度和/或饱和度的颜色将不会产生足够的对比度.

演示jsFiddle

Answer 2

萨拉曼的代码很好,但有时他的反演不够可读.我使用YCbCr只是改变灰度.

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

jsfiddle演示

Answer 3

我在评论中将另一个问题与此主题联系起来.
JS函数计算互补色？

正如Tejasva所说,你需要将RGB转换为HSL,补充Hue并将其转换回来.

我将链接的答案作为样本实现.如果这对你有帮助,请提供原始海报,因为他们提供了解决方案.

示例
http://jsfiddle.net/pLZ89/2/

Answer 4

我曾经遇到过同样的问题，也使用 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 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';
        }

我不把这一切归功于我，我只是受到启发并根据我的需要进行了修改。

资料来源：YIQ 函数解释