Автоматически обновлять ввод для более темного 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 к каждому значению rg и 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).

См. на этот вопрос и ответы .