Automatically change text color to assure readabil

Question

Users can set the background-color of a button through a textbox that accept RGB hexadecimal notation: ff00ff, ccaa22, etc. So I need to set the text color to the opposite. Not sure about the terminology (opposite color) but the idea is assure readability.

Answer 1

Salaman's code is good but sometimes his inversion is not readable enough. I use YCbCr and just change gray scale.

function invertColor(rgb) {
    var yuv = rgb2yuv(rgb);
    var factor = 180;
    var threshold = 100;
    yuv.y = clamp(yuv.y + (yuv.y > threshold ? -factor : factor));
    return yuv2rgb(yuv);
}

jsfiddle demo

Answer 2

Here is a very small way to complement the hex value //hex value like "aa00cc"

function complementHex(hexValue){
    var reqHex = "";
    for(var i=0;i<6;i++){
        reqHex = reqHex + (15-parseInt(hexValue[i],16)).toString(16);
    }
    return reqHex;
}