DETERMINE FONT COLOR BASED ON BG COLOR

by mreis1

HTML

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div id="bg">TEXT</div>

  
                  <div id="existingcolor" class="ui-widget-content ui-corner-all">                                        <br />
                    <div class="rc ec col" title="#FFFFFF" style="background-color: #FFFFFF;">
                    </div>
                    <div class="rc ec col" title="#F2F2F2" style="background-color: #F2F2F2;">
                    </div>
                    <div class="rc ec col" title="#E6E6E6" style="background-color: #E6E6E6;">
                    </div>
                    <div class="rc ec col" title="#CCCCCC" style="background-color: #CCCCCC;">
                    </div>
                    <div class="rc ec col" title="#808080" style="background-color: #808080;">
                    </div>
                    <div class="rc ec col" title="#4D4D4D" style="background-color: #4D4D4D;">
                    </div>
                    <div class="rc ec col" title="#000000" style="background-color: #000000;">
                    </div>
                    <div class="rc ec col" title="#C1272D" style="background-color: #C1272D;">
                    </div>
                    <div class="rc ec col" title="#ED1C24" style="background-color: #ED1C24;">
                    </div>
                    <div class="rc ec col" title="#F7931E" style="background-color: #F7931E;">
                    </div>
                    <div class="rc ec col" title="#FFCC33" style="background-color: #FFCC33;">
                    </div>
                    <div class="rc ec col" title="#FCEE21" style="background-color: #FCEE21;">
            ...

CSS

.col
{
    width: 12px;
    background-color: White;
    border: 1px solid #777;
    height: 12px;
    float: left;
    margin: 1px;
}

#bg{
width: 200px;
height: 200px;    
}

JavaScript

/* supportive functions */

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}

function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [r * 255, g * 255, b * 255];
}

function RGBtoHEX(rgbstring) {
    var str, rgb, hexstring;
    str = rgbstring.substring(rgbstring.indexOf("(") + 1, rgbstring.indexOf(")"));
    rgb = str.split(",");
    if (rgb.length == 4)
        hexstring = rgbToHex(rgb[0], rgb[1], rgb[2], rgb[3]);
    else if (rgb.length == 3)
        hexstring = rgbToHex(rgb[0], rgb[1], rgb[2]);
    return hexstring;
}

function HEXtoRGB(color) {
    document.getElementById("temp1").style.backgroundColor = color;
    color = document.getElementById("temp1").style.backgroundColor;

    var rgb = color.split(",");
    rgb[0] = parseInt(rgb[0].substring(rgb[0].indexOf("(") + 1));
    rgb[1] = parseInt(rgb[1]);
    rgb[2] = parseInt(rgb[2].substring(0, rgb[2].lastIndexOf(")")));

    return rgb;
}

function rgbToHex(R, G, B, A) {
    if (typeof A ==...