PDA

View Full Version : Formula for Percentage of HEX Colour.

Rik Comery
12-04-2004, 10:01 PM
Hi. This may be a little confusing, so i apologise in advance. I require a script that will take a value of a colour (in HEX format), and return the values of two more colours based on the original, one darker and one lighter.

Huh? Let me elaborate.

I have built a menu script, and i have to define the background colour. At the moment, each menu item has a black border, and is therefore very flat. What i would like is for a function to automatically work out a slightly lighter version of the background colour (say a 40% tint of it) and assign this colour to the top and left borders. Then i would like a slightly darker colour to be worked out and this be assigned to the right and bottom borders. The overall effect is a "raised" 3D effect menu item, similar to a form button.

The end script is going to be used by many people internally, most of whome have no programming experience at all, so i want this script to be as automated as possible.

Can anyone help?

Kor
12-06-2004, 10:42 AM
well... hm... The code itself could be a piece of cake, but only if you could make up your mind what indeed "lighter" and "darker" could be, as you try to transfor a bilinear diagram black - color - white into a tri linear one (a triangle with R G B in corners, color in middle)

That means you have at least 6 (3 to "lighter", 3 to "darker") different directions to change a color.

If I build such a 3-3 transform color application for you, will be that of any help?

If you are dealing with web safe colors, that would be much easier, also. (as each of R, G or B scale will have only 16 steps from null to full)

Kor
12-06-2004, 11:54 AM
Well, hm, here's an example, a single "diagonal" change to light/dark (One from the 3 possible I have told you about). This one is base on the keeping the R color unchanged, and modifying both G amd B pallet with a chosen step (3, in my example)

Extending it, you may build the rest of the "diagonals"

This example works only for web safe colors, so far.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
function col(c,s){
if(s>0){
var step=3;//the step to change color
var hexC = c.split('#')[1].split('');
var decC = new Array()
var hexCdark = new Array()
var hexClight = new Array()
var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']
for (var i=0;i<hexC.length;i++){
decC[i] = parseInt(hexC[i],16);
hexCdark[i] = hex[decC[i]];
hexClight[i] = hex[decC[i]];
if(decC[i]<(16-step)){hexCdark[i]=hex[decC[i]-step]}
if(decC[i]>(step-1)){hexClight[i]=hex[decC[i]+step]}
}
document.getElementById('main').style.backgroundColor = c;
document.getElementById('darker').style.backgroundColor = '#'+hexC[0]+hexCdark[1]+hexCdark[2];
document.getElementById('lighter').style.backgroundColor = '#'+hexC[0]+hexClight[1]+hexClight[2];
}
}
</script>
<body>
<select onchange="col(this.options[this.selectedIndex].text,this.selectedIndex)">
<option>--select a color--</option>
<option>#069</option>
<option>#C69</option>
<option>#369</option>
</select><br>
<br>

<tr>
<td id="darker">darker</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td id="main">main</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td id="lighter">lighter</td>
</tr>
</table>

</body>
</html>

You may tested with different web safe colors