根据在先前输入中输入的 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);

它将为每个 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。