Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

Thread: Formula for Percentage of HEX Colour.

1. Formula for Percentage of HEX Colour.

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?

2. 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)

3. 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.

PHP Code:
``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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> </head> <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> <table width="200" border="0" cellspacing="2" cellpadding="2">   <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

Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•