1


0

jQuery-カラーホイールで白または暗いテキストを取得する

この問題は、Jar Two Wheel Color Pickerと呼ばれるほぼ完璧なjQueryコードを見ると現れました。

デモでカーソルをホイールの上に移動したときに気づいた場合、開発者は少し不完全な逆カラーアルゴリズムを使用しているように見えます。 つまり、それを使用して8072ffに貼り付けると、テキストボックスで読むことができないものになってしまいます。

私の頭の中の修正は、アルゴリズムを変更して、明るい色で黒を表示し、暗い色で白を表示するようにすることでした。

ソースを調べてみると、テキストボックスフィールドの色が更新されている箇所が見つかりました。 そこで、0〜255のR、G、Bのカラー値を取得できます。

  • JavascriptとjQueryで、背景色のR、G、およびBの値を知っている場合、前景色を読みやすくするために前景色を白または黒に切り替えるにはどうすればよいですか?*

2 Answer


2


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


1


Michael JacksonのRGB / HSV変換関数が与えられ、ちょっとしたHTMLで遊ぶ:

go

次に、このような何かがまともな出発点かもしれません:

$('#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`で遊んで、色相と彩度も見たいと思うかもしれませんが、簡単な値チェックだけで始められるはずです。 HSVではなくhttp://en.wikipedia.org/wiki/HSL_color_space[HSL]で遊んでみて、どちらが適切かを確認してください。