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
    Kor
    Kor is offline
    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
    Kor
    Kor is offline
    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
    •