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

Możesz zrobić częściowo przezroczysty biały lub czarny PNG i nakładkę (podkład?) to na hover:

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

Nie wymaga JS.

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;

}

Znalezione tutaj: http://www.sitepoint.com/javascript-generate-lighter-darker-color/

W zasadzie wystarczy dodać (dla jaśniejszych) lub odjąć (dla ciemniejszych) równe ilości z każdego ze składników R, G, B.

Spójrz na Domino 2.0 , która jest małą biblioteką javascript, która właśnie to robi.

To stare pytanie.. ale oto mój sposób na zrobienie tego za pomocą replace i 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);
});

Właśnie miałem ten sam problem i rozwiązałem go w następujący sposób, może komuś się przyda. Do tego rozwiązania potrzebne są dwa elementy: zewnętrzny określa kolor, wewnętrzny służy do hightlighting. W moim przypadku mam coś takiego:

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

Następnie definiujesz 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

To jest tylko modyfikacja powiek ' odpowiedz, ponieważ widziałem tę samą funkcję dwa razy

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

Być może jquery.colorhelpers.JS funkcje skalowania i dodawania pomogą? Staram się znaleźć lepsze przykłady niż znajdują się w linii dla kodu źródłowego flot, jednak.

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 są znacznie bardziej "przyjaznymi dla człowieka" reprezentacjami kolorów, więc używanie ich przy tworzeniu jaśniejszego koloru, ciemniejszego, mniej lub bardziej intensywnego lub znalezienie koloru o najlepszym kontraście jest niezwykle proste.

Znalazłem sposób po prostu używając CSS, podobny do rozwiązania Wander Nauta, ale bez użycia obrazu. Jeśli możesz zmienić html, po prostu umieść div za obszarem, który chcesz zmienić z oryginalnym zestawem kolorów jako tłem. Następnie możesz ustawić obszar, który Cię interesuje, półprzezroczystym białym lub czarnym tłem, a następnie rozjaśnić lub przyciemnić swój element.

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

Jeśli masz na myśli js po stronie serwera, możesz użyć Stylus , który jest PREPROCESOREM CSS z wbudowanymi funkcjami do tworzenia jaśniejszych/ciemniejszych kolorów itp.