View Full Version : Formula for Percentage of HEX Colour.

Rik Comery
12-04-2004, 11: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?

12-06-2004, 11: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)

12-06-2004, 12:54 PM
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">
<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){
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]];
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];
<select onchange="col(this.options[this.selectedIndex].text,this.selectedIndex)">
<option>--select a color--</option>

<table width="200" border="0" cellspacing="2" cellpadding="2">
<td id="darker">darker</td>
<td id="main">main</td>
<td id="lighter">lighter</td>


You may tested with different web safe colors