generieren heller/dunkler Farbe in CSS Javascript

Question

let mit sage ich # 404040 Farbcode haben. Wie erzeuge ich einen neuen Farbcode, der um 20% heller oder dunkler ist (oder x%)? Ich brauche das, um eine Hover-Farbe in einer dynamischen Site zu erzeugen (welche Farbe sich unter Verwendung des Themas ändert). Daher ist es nicht möglich, eine andere Klasse zu verwenden oder: mit der vordefinierten Klasse zu schweben.

Dank

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

Griffe Jetzt RGB (A) -Eingang sowie hex (3-stellige oder 6).

Answer 2

Sie müssen im Grunde nur hinzufügen (für leichtere) oder subtrahieren (für dunklere) gleiche Mengen von jedem der R, G, B-Komponenten.

Werfen Sie einen Blick auf Domino 2.0 die eine kleine Javascript-Bibliothek ist, die genau das tut.

Answer 3

Sie könnten eine teilweise transparent weiß oder schwarz PNG und Overlay machen (Unterlage?) Es auf schweben:

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

Kein JS erforderlich.

Answer 4

Dies ist nur eine Modifikation von eyelidlessness 'Antwort, da ich die gleiche Funktion zweimal

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

vielleicht jquery.colorhelpers.js Funktionen für Skala gesehen und würde helfen, hinzufügen? Ich versuche, bessere Beispiele zu finden, als in-line für den Flot-Quellcode gefunden werden.

Answer 6

Wahrscheinlich verpasst http://www.safalra.com/web-design/javascript/colour-handling-and-processing/. Es unterstützt HSV- und HSL-Farben und konvertiert zwischen ihnen und zwischen RGB-Werten.

HSV und HSL sind viel mehr "menschenfreundliche" Darstellungen von Farben, so dass sie eine hellere, eine dunklere, eine mehr oder weniger intensive Farbe verwenden oder die Farbe mit dem besten Kontrast finden.

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

fand ich eine Möglichkeit, CSS nur verwenden, ähnlich Nauta-Lösung zu wandern, aber ohne ein Bild zu verwenden. Wenn Sie den HTML-Code ändern können, legen Sie einfach ein div hinter den Bereich, den Sie ändern möchten, mit der ursprünglichen Farbe als Hintergrund. Dann können Sie den Bereich, um den Sie sich sorgen, mit einem halbtransparenten weißen oder schwarzen Hintergrund versehen und Ihr Element aufhellen oder verdunkeln.

ich es vermute ich hat seine Grenzen, aber es funktioniert gut für mich.

Answer 9

dies ist eine alte Frage .. aber hier ist meine Art und Weise, es zu tun ersetzen und gespalten werden.

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

Wenn Sie meine Serverseite JS dann können Sie Stylus verwenden, die für die Herstellung von Farben ein CSS-Präprozessor mit integrierten Funktionen ist heller/dunkler usw.

Answer 11

Ich hatte gerade das gleiche Problem und ich es gelöst wie folgt, vielleicht nützlich für jemanden. Für diese Lösung benötigen Sie zwei Elemente, das äußere definiert Ihre Farbe, das innere wird für die Hervorhebung verwendet.In meinem Fall habe ich so etwas wie dieses:

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

Dann definieren Sie 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