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

Question

当我看到一个几乎完美的jQuery代码Jar Two Wheel Color Picker时，这个问题突然出现了:

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

如果你在他们的演示中注意到当你将光标移动到滚轮上时，开发人员似乎使用了一种稍微不完美的反向颜色算法。我的意思是，如果你用8072ff来粘贴，你最终会在文本框中看到一些你无法阅读的内容。

我的想法是改变算法，使它显示黑色时，较浅的颜色，和白色时，较深的颜色。

我查看了源代码，发现它在哪里更新了文本框字段的颜色。在那里，我可以得到R, G和B的颜色值从0到255。

在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，看看哪一个更适合你。