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

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 和这段 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/ambigously/xyA4a/

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