Genera il colore più chiaro/più scuro in css usando javascript

Question

diciamo che ho il codice colore 404040. Come generare un nuovo codice colore che è più chiaro o più scuro del 20% (o dato x%)? Ho bisogno di questo per generare un colore al passaggio del mouse in un sito dinamico (il colore sta cambiando usando il tema). Pertanto non è possibile utilizzare un'altra classe o: passa il mouse con la classe predefinita.

Grazie

Answer 1

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

ora gestisce RGB in ingresso (A), come pure esagonale (3 cifre o 6).

Answer 2

In pratica, è sufficiente aggiungere (per accendino) o sottrarre (per scurire) le stesse quantità da ciascuna delle componenti R, G, B.

Dai un'occhiata a Domino 2.0 che è una piccola libreria javascript che fa proprio questo.

Answer 3

Si potrebbe fare un PNG parzialmente trasparente bianco o nero e overlay (underlay?) Che al passaggio del mouse:

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

No JS richiesto.

Answer 4

Questa è solo una modifica del eyelidlessness 'risposta, da quando ho visto la stessa funzione per due volte

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

Answer 5

forse jquery.colorhelpers.js funzioni per la scala e aggiungi aiuterebbe? Sto cercando di trovare esempi migliori di quelli trovati in linea per il codice sorgente flot, comunque.

Answer 6

Probabilmente hai perso http://www.safalra.com/web-design/javascript/colour-handling-and-processing/. Supporta i colori HSV e HSL e li converte tra loro e tra valori RGB.

HSV e HSL sono molto più rappresentazioni di colori "amichevoli", quindi utilizzarle per ottenere colori più chiari, più scuri, più o meno intensi o trovare il colore con il miglior contrasto è estremamente semplice.

Answer 7

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; 

}

Found here: http://www.sitepoint.com/javascript-generate-lighter-darker-color/

Answer 8

ho trovato un modo solo usando i CSS, simile a vagare soluzione di Nauta, ma senza l'utilizzo di un'immagine. Se è possibile modificare l'html, è sufficiente mettere un div dietro l'area che si desidera modificare con il set di colori originale come sfondo. Quindi, puoi impostare l'area che ti interessa con uno sfondo semitrasparente bianco o nero e schiarire o scurire il tuo elemento.

Immagino che abbia i suoi limiti, ma funziona benissimo per me.

Answer 9

questa è una vecchia domanda .. ma questo è il mio modo di farlo usando replace e 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); 
}); 

Answer 10

Se vuoi dire lato server JS quindi è possibile utilizzare Stylus che è un preprocessore CSS con funzioni incorporate per rendere i colori chiaro/scuro ecc

Answer 11

Ho appena avuto lo stesso problema e ho risolto come segue, forse utile per qualcuno. Per questa soluzione hai bisogno di due elementi, quello esterno definisce il tuo colore, quello interno è usato per l'hightlighting.Nel mio caso ho qualcosa di simile:

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

Poi si definiscono in 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