javascript - Javascript 暗い色を計算する

Question

この計算を明るい色ではなく暗い色に変更するにはどうすればよいですか?

function increase_brightness(hex, percent){
    // strip the leading # if it's there
    hex = hex.replace(/^\s*#|\s*$/g, '');

    // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
    if(hex.length == 3){
        hex = hex.replace(/(.)/g, '$1$1');
    }

    var r = parseInt(hex.substr(0, 2), 16),
        g = parseInt(hex.substr(2, 2), 16),
        b = parseInt(hex.substr(4, 2), 16);

    return '#' +
       ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) +
       ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) +
       ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);
}

src = JavaScript 明るい色を計算

デモ http://jsbin.com/utavax/3/edit

score 6 · Accepted Answer

あなたは変えられる

return '#' +
   ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) +
   ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) +
   ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);

に

return '#' +
   ((0|(1<<8) + r * (1 - percent / 100)).toString(16)).substr(1) +
   ((0|(1<<8) + g * (1 - percent / 100)).toString(16)).substr(1) +
   ((0|(1<<8) + b * (1 - percent / 100).toString(16)).substr(1);

あなたの問題を解決します。デモ。

しかし、暗い色は良い定義ではありません。暗いとは、輝度が低い、または彩度が低いと解釈できます。したがって、より良いアプローチは、RGB カラースペースを HSB カラースペースに変換し、S/B チャンネルを微調整してから元に戻すことです。

元のコードに負の値を使用しても問題ない理由について少し説明します。

パーセントとして -100 を指定し、128 未満の r などのチャネルを指定します。

r + (256 - r) * percent / 100

1 << 8プラス= 256の後、0未満です

((0|(1<<8) + r + (256 - r) * percent / 100)

は 256 未満です。

256 未満の数値を取得するとtoString(16)、を呼び出して最大 2 桁の 16 進数が生成されるため.substr(1)、0 または 1 桁のみが含まれます。これらの間違った数字をすべて組み合わせると、16 進表現で適切な色が生成されません。

score 0 · Accepted Answer

Stylus ( 1 , 2 )から主なアイデアを取り、スタックオーバーフローの回答からいくつかのコード部分を取り、ライブラリdarken_color.jsを作成しました。

いくつかの使用例を次に示します。

darken('lightgreen', '0.1'); // -> #63e763 
darken('lightgreen', '10'); // -> #63e763
darken('#90EE90', '10'); // -> #63e763
darken('#9e9', '10%'); // ->  #98ed98

score -1 · Accepted Answer

return '#' +
   ((0|(1<<8) + r + (256 - r) * percent / 100).toString(16)).substr(1) +
   ((0|(1<<8) + g + (256 - g) * percent / 100).toString(16)).substr(1) +
   ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);

rここでは、gとの割合bを現在の値に追加して、色を明るくしています。パーセンテージに負の値を使用すると、現在の値から減少し、色が濃くなります。

javascript - Javascript 暗い色を計算する

4 に答える 4

Related

Reference