web-dev-qa-db-fra.com

Générer des couleurs plus claires/plus sombres en css à l'aide de javascript

disons que j'ai le code de couleur # 404040. Comment générer un nouveau code de couleur plus clair ou plus foncé de 20% (ou donné x%)? J'ai besoin de cela pour générer une couleur de survol dans un site dynamique (la couleur change selon le thème). Par conséquent, il n'est pas possible d'utiliser une autre classe ou: survolez avec une classe prédéfinie.

Merci

javascripthtmlcsscolors
34
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);

Gère maintenant les entrées RVB (A) et hexadécimales (3 chiffres ou 6).

59
eyelidlessness

Vous pouvez créer un fichier PNG blanc ou noir partiellement transparent et le superposer (sous-couche?) Au survol:

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

Aucun JS requis.

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;

}

Trouvé ici: http://www.sitepoint.com/javascript-generate-lighter-darker-color/

3
user989840

c'est une vieille question .. mais voici ma façon de le faire en utilisant replace et split. 

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

En gros, il vous suffit d’ajouter (pour plus clair) ou de soustraire (pour plus foncé) des quantités égales à chacune des composantes R, G et B.

Jetez un coup d’œil à Domino 2.0 qui est une petite bibliothèque javascript qui fait exactement cela.

1
ChssPly76

Je viens d'avoir le même problème et je l'ai résolu comme suit, peut-être utile pour quelqu'un. Pour cette solution, vous avez besoin de deux éléments: l’extérieur définit votre couleur, l’intérieur est utilisé pour l’éclairage. Dans mon cas, j'ai quelque chose comme ça:

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

Ensuite, vous définissez en CSS:

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

.button a {
   display: inline-block;
}

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

Fiddle

1
Jan Schaefer

peut-être que jquery.colorhelpers.js fonctions pour la balance et ajouter aiderait? J'essaie de trouver de meilleurs exemples que ceux trouvés en ligne pour le code source de flot, cependant.

0
ericslaw

J'ai trouvé un moyen d'utiliser simplement CSS, similaire à la solution de Wander Nauta, mais sans utiliser d'image. Si vous pouvez modifier le code HTML, placez simplement un div derrière la zone à modifier avec la couleur d'origine définie comme arrière-plan. Ensuite, vous pouvez définir la zone qui vous intéresse sur un fond blanc ou noir semi-transparent, et éclaircir ou assombrir votre élément.

Je suppose que cela a ses limites, mais cela fonctionne très bien pour moi.

0
Scott Mermelstein

Vous avez probablement manqué http://www.safalra.com/web-design/javascript/colour-handling-and-processing/ . Il prend en charge les couleurs HSV et HSL et convertit entre elles et entre les valeurs RVB.

HSV et HSL sont des représentations de couleurs bien plus "humaines", il est donc extrêmement simple de les utiliser pour rendre une couleur plus claire, une couleur plus foncée, plus ou moins intense ou trouver la couleur avec le meilleur contraste.

0
Simone Gianni

Si vous parlez de JS côté serveur, vous pouvez utiliser Stylus qui est un préprocesseur CSS avec des fonctions intégrées pour éclaircir/assombrir les couleurs, etc.

0
Radek

Ceci est juste une modification de sans paupière 'réponse, puisque j'ai vu la même fonction deux fois

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