根據前一個輸入中輸入的HexColor，自動更新輸入爲較暗的HexColor

Question

以下是我希望最終產品可以實現的想法。說我有兩個輸入：

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

比方說，用戶輸入這個十六進制顏色代碼「BACKGROUND_COLOR」輸入：#FF8CA9（淺粉色）。我想在「border_color」輸入中自動添加此顏色十六進制代碼的較暗色調：說#D63E64（深粉紅色）。

所以是有可能1）查找較深的是在輸入「BACKGROUND_COLOR」進入和產生它的十六進制顏色代碼和2）自動將其放置在輸入顏色的色調「border_color」不刷新頁面？

我不知道如何以其他方式解釋這一點，我知道這可能聽起來令人困惑，但如果你不明白某些部分，請問我。

附加信息：如果需要使用某種javascript，jQuery解決方案更可取。

Answer 1

我挖掘了一段完全符合你想要的代碼。它可能需要一些調整。 運行這樣的：

add_to_color('#996600', 10); 

這將增加10到每個R G和B值。這會使顏色變淺。使其更暗使用-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。