Generowanie jaśniejszego/ciemniejszego koloru w css przy użyciu javascript

Question

powiedzmy, że mam kod koloru # 404040. Jak wygenerować nowy kod koloru, który jest jaśniejszy lub ciemniejszy o 20% (lub podany x%)? Potrzebuję tego do wygenerowania koloru kursora w dynamicznej witrynie (której kolor zmienia się za pomocą motywu). Dlatego nie można użyć innej klasy lub: hover z predefiniowaną klasą.

Dzięki

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

Teraz obsługuje RGB (A) wejście, jak również hex (3 cyfry lub 6).

Answer 2

Po prostu wystarczy dodać (dla jaśniejszego) lub odjąć (dla ciemniejszych) równe ilości z każdego z komponentów R, G, B.

Proszę spojrzeć na Domino 2.0, która jest małą biblioteką javascript, która właśnie to robi.

Answer 3

Można dokonać częściowo przezroczysty biały lub czarny PNG i nakładki (podkładać?) Go przy aktywowaniu: wymagana

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

Nie JS.

Answer 4

To jest tylko modyfikacja eyelidlessness "odpowiedź, ponieważ widziałem tę samą funkcję dwukrotnie

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

być może jquery.colorhelpers.js funkcje skali i dodać pomoże? Próbuję znaleźć lepsze przykłady, niż można znaleźć w linii dla kodu źródłowego flot.

Answer 6

Prawdopodobnie przegapiłeś http://www.safalra.com/web-design/javascript/colour-handling-and-processing/. Obsługuje kolory HSV i HSL i konwertuje między nimi i między wartościami RGB.

HSV i HSL to znacznie bardziej "przyjazne dla człowieka" reprezentacje kolorów, więc używanie ich w jaśniejszym kolorze, ciemniejszym, bardziej lub mniej intensywnym, lub znajdowanie koloru o najlepszym kontraście jest niezwykle proste.

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

znalazłem sposób tylko za pomocą CSS, podobny do Wander rozwiązanie Nauta, ale bez użycia obrazu. Jeśli możesz zmienić kod HTML, po prostu umieść element div za obszarem, który chcesz zmienić, używając oryginalnego zestawu kolorów jako tła. Następnie możesz ustawić obszar, którego dotyczysz, na półprzezroczyste białe lub czarne tło, a następnie rozjaśnić lub przyciemnić element.

Zgaduję, że ma swoje ograniczenia, ale działa doskonale dla mnie.

Answer 9

to stare pytanie .. ale oto mój sposób robienia tego za pomocą zamiany i podziału.

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

Jeśli masz na myśli JS po stronie serwera, a następnie można użyć Stylus który jest preprocesor CSS z wbudowanych funkcji do tworzenia kolory jaśniejsze/ciemniejsze itp

Answer 11

prostu miałem ten sam problem i rozwiązać go co może być przydatne dla kogoś. Do tego rozwiązania potrzebne są dwa elementy, z których zewnętrzny definiuje twój kolor, a wewnętrzny służy do podświetlania.W moim przypadku mam coś takiego:

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

Następnie należy określić w 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