Question

以下是我希望最终产品能够做到的想法。说我有两个输入：

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

假设用户在“background_color”输入中输入此Hex颜色代码：#FF8CA9（浅粉红色）。我想在“border_color”输入中自动添加此颜色十六进制代码的深色调：说#D63E64（深粉色）。

是否可以 1）找到输入“background_color”中输入的较暗色调并生成其颜色的Hex颜色代码并 2）自动放置它输入“border_color”没有页面刷新？

我不知道如何以其他方式解释这个问题，我知道这听起来可能有点令人困惑，但如果你不理解某些部分，请问我。

其他信息：如果需要使用javascript，最好使用jQuery解决方案。

Answer 1

只需将RGB值乘以某个值（或转换为HSV并修改V），即可获得更亮或更暗的颜色。

请参阅this question and answers。

Answer 2

我挖了一段旧代码，它完全符合你的要求。它可能需要一些调整。像这样运行：

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;                                                                                                                                        
}

根据在先前输入中输入的十六进制颜色，自动将输入更新为更暗的十六进制颜色

2 个答案: