Question

当我查看一个名为Jar Two Wheel Color Picker的几乎完美的jQuery代码时，会弹出这个问题：

http://www.jar2.net/projects/jquery-wheelcolorpicker/demo

如果您在演示中注意到将光标移到方向盘上时，开发人员似乎正在使用稍微不完美的反色算法。我的意思是，如果您使用它并粘贴在8072ff中，您最终会得到文本框中无法读取的内容。

我的想法是修改算法，使其在浅色时显示黑色，在深色时显示白色。

我查看了源代码并找到了更新文本框字段颜色的位置。在那里，我能够得到0到255的R，G和B颜色值。

在Javascript和jQuery中，知道背景颜色的R，G和B值，如何将前景颜色切换为白色或黑色以便可读？

Answer 1

转换为hsl可以轻松找到对比色 -

但是在rgb和hsl之间进行转换需要一些时间。

这适用于大多数情况 - 但它不会取代你的眼睛。

function bW(r){
//r must be an rgb color array of 3 integers between 0 and 255. 

    var contrast= function(B, F){
        var abs= Math.abs,
        BG= (B[0]*299 + B[1]*587 + B[2]*114)/1000,
        FG= (F[0]*299 + F[1]*587 + F[2]*114)/1000,
        bright= Math.round(Math.abs(BG - FG)),
        diff= abs(B[0]-F[0])+abs(B[1]-F[1])+abs(B[2]-F[2]);
        return [bright, diff];
    }
    var c, w= [255, 255, 255], b= [0, 0, 0];
    if(r[1]> 200 && (r[0]+r[2])<50) c= b;
    else{
        var bc= contrast(b, r);
        var wc= contrast(w, r);
        if((bc[0]*4+bc[1])> (wc[0]*4+wc[1])) c= b;
        else if((wc[0]*4+wc[1])> (bc[0]*4+bc[1])) c= w;
        else c= (bc[0]< wc[0])? w:b;
    }
    return 'rgb('+c.join(',')+')';
}

Answer 2

鉴于来自Michael Jackson的RGB / HSV转换函数以及HTML的这一部分：

<input type="text" id="pancakes">
<button id="margie">go</button>

然后这样的事情可能是一个不错的起点：

$('#margie').click(function() {
    var bg  = $('#pancakes').val();
    var rgb = bg.match(/../g);
    for(var i = 0; i < 3; ++i)
        rgb[i] = parseInt(rgb[i], 16);
    var hsv = rgbToHsv(rgb[0], rgb[1], rgb[2]);
    var fg  = 'ffffff';
    if(hsv[2] > 0.5)
        fg = '000000';
    $('#pancakes').css({
        color: '#' + fg,
        background: '#' + bg
    });
});

演示：http://jsfiddle.net/ambiguous/xyA4a/

您可能想要使用hsv[2] > 0.5并且可能还要查看色调和饱和度，但只需进行简单的值检查即可开始使用。您可能希望使用HSL而不是HSV，并查看哪一个更适合您。

jQuery - 在色轮上获得白色或深色文本

2 个答案: