Border Colors

by David Joseph Guzsik

HTML

<div class="background style1"></div>
<div class="background style2"></div>
<div class="background style3"></div>
<div class="background style4"></div>
<div class="background style5"></div>
<div class="background style6"></div>

CSS

.background {
    border:2px solid #000;
    width:30px;
    height:30px;
    display:inline;
    padding:3px;
}
.style1 { background-color:#000000; color:#fff }
.style2 { background-color:#ff0000 }
.style3 { background-color:#ffff00 }
.style4 { background-color:#00ffff }
.style5 { background-color:#0000ff;color:#fff }
.style6 { background-color:#00ff00 }

JavaScript

$('.background').each(function(){
    $(this).html(rgbToHex($(this).css("backgroundColor")));
});

function rgbToHex(total) {
		var total = total.split(',');
		var r = total[0].substring(4);
		var g = total[1].substring(1);
		var b = total[2].substring(1,total[2].length-1);
	return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
}
function checkNumber(i){
	i = i.toString();
	if (i.length == 1) return '0'+i;
	else return i;
}