ansaurus

Question

Calculating contrasting colours in javascript

Answer 1

+2 A:

You probably want to shift hue, but not saturation or value.

So, convert your RGB value into HSV, add 180 degrees to H (modulo 360 degrees of course), and convert back to RGB.

Jason Cohen 2009-03-11 15:25:37

Ugh, that's a terrible idea. Shifting hue gets you a muddy mess at best (wood brown + dark blue) and a blinding headache at worst (red + green). A much safer course is shifting value.

2009-03-11 15:32:48

Answer 2

+3 A:

In terms of sheer readability, you want to use black and white text on whatever background it is. So convert RGB to HSV, and just check whether V is < 0.5. If so, white, if not, black.

Try that first and see if you find it attractive.

If you don't, then you probably want the white and black not to be so stark when your background is too bright or too dark. To tone this down, keep the same hue and saturation, and use these values for brightness:

background V  foreground V
0.0-0.25      0.75
0.25-0.5      1.0
0.5-0.75      0.0
0.75-1.0      0.25

On a medium color, you'll still see black or white text which will be nicely readable. On a dark color or light color, you'll see the same color text but at least 3/4 away in terms of brightness and therefore still readable. I hope it looks nice :)

Kevin Conner 2009-03-11 15:31:29

For whatever reason HSV does not give the desired effect. HSL, on the other hand, with the exeption of few saturated colours, even in pure b/w (with a slight bias towards black) does the job quite nicely.

georged 2009-03-12 03:50:34

OK, maybe HSL is what I really meant :) I'm not totally sure.

Kevin Conner 2009-03-12 13:28:46

Answer 3

A:

It's a bit complicated t implement because of javascript's way of dealing with decimal values. For this purpose I've found it to be much better to let the background change any color but the text just switch between black and white. If you use contrasting colors alot of combinations will be really hard to stand. Also note that some people are colorblind, so it's not a very good idea from accessibility perspective.

Vasil 2009-03-11 15:44:01

Answer 4

+2 A:

Try this example, which just sets it to black or white depending on the average of the r,g and b values. Also good for testing! Substitute a better algorithm in there if you find cases that don't work very well.

<html> 
<head> 
<script> 
function rgbstringToTriplet(rgbstring)
{
    var commadelim = rgbstring.substring(4,rgbstring.length-1);
var strings = commadelim.split(",");
var numeric = [];
for(var i=0; i<3; i++) { numeric[i] = parseInt(strings[i]); }
return numeric;
}

function adjustColour(someelement)
{
   var rgbstring = someelement.style.backgroundColor;
   var triplet = rgbstringToTriplet(rgbstring);
   var newtriplet = [];
   // black or white:
   var total = 0; for (var i=0; i<triplet.length; i++) { total += triplet[i]; } 
   if(total > (3*256/2)) {
     newtriplet = [0,0,0];
   } else {
 newtriplet = [255,255,255];
   }
   var newstring = "rgb("+newtriplet.join(",")+")";
   someelement.style.color = newstring;
   return true;
}

function randomiseBackground(someelement)
{
 var vals = [];
 for(var i=0; i<3; i++) { vals[i]=Math.floor(Math.random()*256+1); }
 someelement.style.backgroundColor="rgb("+vals.join(",")+")";
 return true;
}
</script> 
</head> 
<body onload="adjustColour(document.getElementById('mypara'));"> 
<p id="mypara" style="background-color:#2287ea">Some text</p> 
<form> 
    <input type=button onclick="var elem=document.getElementById('mypara'); randomiseBackground(elem); adjustColour(elem);" value="randomise background" /> 
</form> 
</body> 
</html>

Phil H 2009-03-11 16:54:26

Answer 5

A:

i have seen similar things done with captcha breaking, there is info there

2009-03-11 16:59:48

ansaurus

tags:

views:

answers:

Calculating contrasting colours in javascript

related questions