4

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

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

4

4 に答える 4

6

あなたは変えられる

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 進表現で適切な色が生成されません。

于 2012-11-14T08:31:14.240 に答える
0

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

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

darken('lightgreen', '0.1'); // -> #63e763 
darken('lightgreen', '10'); // -> #63e763
darken('#90EE90', '10'); // -> #63e763
darken('#9e9', '10%'); // ->  #98ed98
于 2013-06-06T09:56:00.723 に答える
-1 
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を現在の値に追加して、色を明るくしています。パーセンテージに負の値を使用すると、現在の値から減少し、色が濃くなります。

于 2012-11-14T08:16:52.550 に答える