Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2003
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Last edited by Kor; 12-06-2004 at 01:02 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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