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

Question

当我查看一段近乎完美的 jQuery 代码，称为 Jar Two Wheel Color Picker 时，出现了这个问题:

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(',')+')';
}