根据前一个输入中输入的HexColor，自动更新输入为较暗的HexColor

以下是我希望最终产品可以实现的想法。说我有两个输入：根据前一个输入中输入的HexColor，自动更新输入为较暗的HexColor

<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解决方案更可取。

来源

2012-01-14 Ilja

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

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

来源

2012-01-14 14:45:29 timing

我可以创建一个新的十六进制代码的变量？我需要自动将它放在 – Ilja 2012-01-14 18:15:19

使用javascript onchange事件并将背景字段的值传递给add_to_color。然后，您可以将返回值放在边框字段中 – timing 2012-01-16 08:53:16

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

请参阅this question and answers。

来源

2012-01-14 13:01:16

事情是我使用jQuery UI颜色选择器插件。所以当用户点击其中一个输入时，他们不会手动输入颜色，而是从使用十六进制颜色代码的颜色托盘中选取它，并且我不知道如何将其更改为使用rgb。 – Ilja 2012-01-14 13:07:59

十六进制颜色代码是（通常）RGB。所以'＃FF8CA9'中，红色值为FF，绿色为8C，红色为A9。 – 2012-01-14 13:09:11

好吧，我不知道，谢谢你我会看你提供的答案链接，但它基于C＃不是吗？有没有一些JavaScript/jQuery解决方案？这对我来说很棘手，因为我对这些编码语言不太好 – Ilja 2012-01-14 13:10:45

根据前一个输入中输入的HexColor，自动更新输入为较暗的HexColor

回答

相关问题