前回入力時に入力したHexColorに応じて入力を自動的に暗いHexColorに更新します

Question

ここでは、最終製品の希望を考えています。 #FF8CA9（ライトピンクの色）：

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

はのは、ユーザの入力「BACKGROUND_COLOR」入力で、この六角カラーコードを言ってみましょう：私は2つの入力を持っていると言います。私は自動的に "border_color"入力にこの色の16進コードの濃い色を追加したいとします：#D63E64（暗いピンクの色）。

だから、「BACKGROUND_COLOR」入力に入力されたと六角カラーそれのコードと入力で2）自動的に置きを生成した色のトーンが暗く検索1）することが可能となる「border_color」ページなしでリフレッシュ？

これを他の方法で説明する方法がわかりませんが、わかりにくいかもしれませんが、一部の部分を理解できない場合は私に尋ねてください。

追加情報：これはjavascriptの種類を使用する必要がある場合は、jQueryソリューションが適しています。

Answer 1

欲しいものを正確に実行する古いコードを掘り下げました。チューニングが必要な場合があります。 実行は次のように：

add_to_color('#996600', 10); 

それは、すべてのR G、Bの値に10を追加します。これにより、色が明るくなります。暗くするには-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;                                   
} 

Answer 2

RGB値に何らかの値を掛ける（またはHSVに変換してVを変更する）だけで、明るくまたは暗い色にすることができます。

this question and answersを参照してください。