web-dev-qa-db-ja.com

JavaScriptを使用してCSSで明るい/暗い色を生成する

＃404040のカラーコードがあるとします。 20％明るいまたは暗い（または指定されたx％）新しいカラーコードを生成する方法これは、動的サイトでホバー色を生成するために必要です（色はテーマを使用して変化します）。したがって、事前定義されたクラスで別のクラスまたは：hoverを使用することはできません。

ありがとう

javascripthtmlcsscolors
36
HP.
var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
    );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
        // Determine if input is RGB(A)
        rgb = color.match(new RegExp('^rgba?\\(\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '(?:\\s*,\\s*' +
            '(0|1|0?\\.\\d+))?' +
            '\\s*\\)$'
        , 'i')),
        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

        // Convert hex to decimal
        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
            /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/),
        returnValue;

    // Return RGB(A)
    return !!rgb ?
        'rgb' + (alpha !== null ? 'a' : '') + '(' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ) +
            (alpha !== null ? ', ' + alpha : '') +
            ')' :
        // Return hex
        [
            '#',
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ).toString(16), 2)
        ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

RGB（A）入力と16進数（3桁または6）を処理するようになりました。

64
eyelidlessness

部分的に透明な白または黒のPNGを作成し、ホバー時にオーバーレイ（アンダーレイ？）できます。

div.button {
  background-color: #404040;
}
body>div.button:hover {
  background-image: url('blackpixel.png');
}

JSは必要ありません。

8
Wander Nauta
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
    hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
    c = parseInt(hex.substr(i*2,2), 16);
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
    rgb += ("00"+c).substr(c.length);
}
return rgb;

}

ここにあります：http://www.sitepoint.com/javascript-generate-lighter-darker-color/

3
user989840

これは古い質問ですが、ここに、置換と分割を使用して行う私の方法があります。

var CO='' ;

$('#HoverMe').hover(function(){  
CO=$(this).css('backgroundColor' );

var CC= $(this).css('backgroundColor').replace('rgb(','').replace(')','').split(',');

var Change=0.2;

var CR=Math.floor((CC[0]*Change)+parseInt(CC[0]));

var CG=Math.floor((CC[1]*Change)+parseInt(CC[1]));

var CB=Math.floor((CC[2]*Change)+parseInt(CC[2]));

$(this).css('background','rgb('+CR+','+CG+','+CB+')');},

function(){
    $(this).css('background',CO);
});
1
SGFX

基本的には、R、G、Bの各コンポーネントから等しい量を追加（明るい場合）または差し引く（暗い場合）だけです。

Domino 2. を見てください。これは、まさにそれを行う小さなJavaScriptライブラリです。

1
ChssPly76

私は同じ問題を抱えていて、私は次のようにそれを解決しました、おそらく誰かにとって有用です。このソリューションでは、2つの要素が必要です。外側の要素は色を定義し、内側の要素はハイライトに使用されます。私の場合、私はこのようなものを持っています：

<div class="button"><a href="#">Hi Color</a></div>

次に、CSSで定義します。

.button {
   display: inline-block;
   background-color: blue;
}

.button a {
   display: inline-block;
}

.button a:hover {
   background-color: rgba(255,255,255,0.5);
}

フィドル

1
Jan Schaefer

おそらく jquery.colorhelpers.js スケールと追加のための関数が役立つでしょうか？ただし、Flotソースコードのインラインよりも優れた例を見つけようとしています。

0
ericslaw

CSSを使用する方法を見つけました。ワンダーナウタのソリューションに似ていますが、画像を使用しません。 htmlを変更できる場合は、変更する領域の後ろにdivを配置し、元の色を背景として設定します。次に、気になる領域を白または黒の半透明の背景で設定でき、要素を明るくまたは暗くします。

それには限界があると思いますが、私にとってはうまくいきます。

0
Scott Mermelstein

おそらくあなたは http://www.safalra.com/web-design/javascript/colour-handling-and-processing/ を見逃したでしょう。 HSVおよびHSLカラーをサポートし、それらの間およびRGB値の間で変換します。

HSVとHSLははるかに「人にやさしい」色の表現であるため、これらを使用して明るい色、暗い色、多かれ少なかれ強度のある色を作成したり、最高のコントラストで色を見つけるのは非常に簡単です。

0
Simone Gianni

サーバー側のJSの場合は、 Stylus を使用できます。これは、色を明るくしたり暗くしたりするための組み込み関数を備えたCSSプリプロセッサです。

0
Radek

同じ機能を2回見たので、これは eyelidlessness 'の回答の単なる変更です。

var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    var difference = Math.round(ratio * 255) * (darker ? -1 : 1),
        minmax     = darker ? Math.max : Math.min,
        decimal    = color.replace(
            /^#?([a-z0-9][a-z0-9])([a-z0-9][a-z0-9])([a-z0-9][a-z0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/);
    return [
        '#',
        pad(minmax(parseInt(decimal[0], 10) + difference, 0).toString(16), 2),
        pad(minmax(parseInt(decimal[1], 10) + difference, 0).toString(16), 2),
        pad(minmax(parseInt(decimal[2], 10) + difference, 0).toString(16), 2)
    ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('#404040', .2);
var lighter = lighterColor('#404040', .2);
0
Justin Johnson