2012-01-14 50 views
0

ここでは、最終製品の希望を考えています。 #FF8CA9(ライトピンクの色):前回入力時に入力したHexColorに応じて入力を自動的に暗いHexColorに更新します

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

はのは、ユーザの入力「BACKGROUND_COLOR」入力で、この六角カラーコードを言ってみましょう:私は2つの入力を持っていると言います。私は自動的に "border_color"入力にこの色の16進コードの濃い色を追加したいとします:#D63E64(暗いピンクの色)。

だから、「BACKGROUND_COLOR」入力に入力されたと六角カラーそれのコードと入力で2)自動的に置きを生成した色のトーンが暗く検索1)することが可能となる「border_color」ページなしでリフレッシュ?

これを他の方法で説明する方法がわかりませんが、わかりにくいかもしれませんが、一部の部分を理解できない場合は私に尋ねてください。

追加情報:これはjavascriptの種類を使用する必要がある場合は、jQueryソリューションが適しています。

答えて

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

新しい16進コードの変数を作成できますか? に自動的に配置する必要があります。 – Ilja

+0

javascript onchangeイベントを使用して、背景フィールドの値をadd_to_colorに渡します。境界フィールドに戻り値を入れることができます – timing

1

RGB値に何らかの値を掛ける(またはHSVに変換してVを変更する)だけで、明るくまたは暗い色にすることができます。

this question and answersを参照してください。

+0

私はjQuery UIカラーピッカープラグインを使用しています。ユーザーが入力の1つをクリックすると、手動で色を入力するのではなく、Hexカラーコードを使用するカラーパレットから色を選択して、rgbを使用するように変更する方法はわかりません。 – Ilja

+0

16進数のカラーコードは(通常)RGBです。したがって、#FF8CA9では、赤の値はFF、緑は8C、赤はA9です。 –

+0

ok、私はそれを知らなかった、ありがとう、私はあなたが提供した答えのリンクを見ていきますが、そのC#に基づいていないですね? Javascript/jQueryソリューションの種類はありますか?私はこれらのコーディング言語ではあまりよくないので、これは私にとっては難しいです。 – Ilja

関連する問題