0

Here is the idea of what I hope final product would do. Say I have two inputs:

<form id="builder"/>
<input type="text" name="background_color" />
<input type="text" name="border_color" />
</form>

Let's say user inputs this Hex color code in "background_color" input: #FF8CA9 (Light pink color). I want to automatically add darker tone of this color Hex code in "border_color" input: say #D63E64 (dark pink color).

So is it possible to 1) Find darker tone of color that was entered in input "background_color" and generate Hex color code of it and 2) automatically place it in input "border_color" without page refresh?

I'm not sure how to explain this in other way, I know it might sound confusing, but if you don't understand some parts please ask me.

Additional info: if this needs to use sort of javascript, a jQuery solution is preferable.

Ilja
  • 44,142
  • 92
  • 275
  • 498

2 Answers2

1

You can get brighter or darker color by simply multiplying its RGB values by some value (or converting to HSV and modifying V).

See this question and answers.

Community
  • 1
  • 1
Sergio Tulentsev
  • 226,338
  • 43
  • 373
  • 367
  • The thing is I'm using jQuery UI color picker plugin. So when user clicks on one of the inputs they don't enter color manually, but pick it from color pallet, which uses Hex color codes, and I don't know how to change it to use rgb. – Ilja Jan 14 '12 at 13:07
  • Hex color code is (usually) RGB. So in `#FF8CA9`, red value is FF, green is 8C and red is A9. – Sergio Tulentsev Jan 14 '12 at 13:09
  • ok, I didn't know that, thank you I'll look at answer link you provided, but its based on c# isn't it? Is there sort of javascript/jQuery solutions? this is tricky for me as I'm not very good with those coding languages – Ilja Jan 14 '12 at 13:10
  • Come on, basic concept should be understandable from this answer alone. Do you not know how to get a substring, convert hex<->dec and do multiplication? – Sergio Tulentsev Jan 14 '12 at 13:12
  • Kinda ;) I'll try to figure it out )) Thnx for concept answer I'm looking at it right now and it is helping ))) – Ilja Jan 14 '12 at 13:14
1

I digged up an old piece of code which does exactly what you want. It might need some tuning. Run it like this: 

add_to_color('#996600', 10);

It will add 10 to every r g and b value. This will make the color lighter. To make it darker use -10.

function add_to_color(hex, addDec)                                                                                                                        
{                                                                                                                                                         
    hex = hex.replace('#', '');                                                                                                                           
    rDec = Hex2Dec(hex.substr(0,2));                                                                                                                      
    gDec = Hex2Dec(hex.substr(2,2));                                                                                                                      
    bDec = Hex2Dec(hex.substr(4,2));                                                                                                                      

    if( rDec < -addDec || gDec < -addDec || bDec < -addDec )                                                                                              
    {                                                                                                                                                     
        return '#'+hex;                                                                                                                                   
    }                                                                                                                                                     

    rDec = rDec + addDec;                                                                                                                                 
    gDec = gDec + addDec;                                                                                                                                 
    bDec = bDec + addDec;                                                                                                                                 

    hex = "#"+ Dec2Hex(rDec)+Dec2Hex(gDec)+Dec2Hex(bDec);                                                                                                 

    return hex;                                                                                                                                           
}

function Hex2Dec(HexVal)                                                                                                                                  
{                                                                                                                                                         
    HexVal=HexVal.toUpperCase();                                                                                                                          
    var DecVal=0;                                                                                                                                         
    var HV1=HexVal.substring(0,1);                                                                                                                        
    DecVal=(HexChars.indexOf(HV1)*16);                                                                                                                    
    HV1=HexVal.substring(1);                                                                                                                              
    DecVal+=HexChars.indexOf(HV1);                                                                                                                        
    return DecVal;                                                                                                                                        
}                                                                                                                                                         

// Created by T.N.W.Hynes - (c) 2002 PalandorZone.com ... Use it freely but leave this line intact                                                        
// Conversion function for Decimal to Hexadecimal - 255 max                                                                                               
function Dec2Hex(DecVal)                                                                                                                                  
{                                                                                                                                                         
    DecVal=parseInt(DecVal);                                                                                                                              
    if (DecVal > 255 || DecVal < 0)                                                                                                                       
    {                                                                                                                                                     
        DecVal=255;                                                                                                                                       
    }                                                                                                                                                     
    var Dig1 = DecVal % 16;                                                                                                                               
    var Dig2 = (DecVal-Dig1) / 16;                                                                                                                        
    var HexVal = HexChars.charAt(Dig2)+HexChars.charAt(Dig1);                                                                                             
    return HexVal;                                                                                                                                        
}
timing
  • 6,340
  • 1
  • 17
  • 16
  • Can I create a variable for new hexcode? I need to automatically place it in – Ilja Jan 14 '12 at 18:15
  • use the javascript onchange event and pass the value of the background field to add_to_color. You can then put the return value in the border field – timing Jan 16 '12 at 08:53