online - Genera un color más claro/más oscuro en css usando javascript

tabla de codigo de colores

Question

digamos que tengo el código de color # 404040. ¿Cómo generar un nuevo código de color que sea más claro o más oscuro en un 20% (o dado x%)? Necesito esto para generar un color flotante en un sitio dinámico (qué color está cambiando con el tema). Por lo tanto, no es posible usar otra clase o: pase el mouse con una clase predefinida.

Gracias

Answer 1

¿Podría hacer que un PNG blanco o negro parcialmente transparente y una superposición (subyacente?) Sobre el vuelo estacionario:

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

No se requiere JS.

Answer 2

Básicamente, solo necesita agregar (para encendedor) o restar (para más oscuro) cantidades iguales de cada uno de los componentes R, G, B.

Eche un vistazo a Domino 2.0, que es una pequeña biblioteca de JavaScript que hace precisamente eso.

Answer 3

Encontré una forma de usar CSS, similar a la solución de Wander Nauta, pero sin usar una imagen. Si puede cambiar el html, simplemente coloque un div detrás del área que desea cambiar con el color original configurado como fondo. Luego, puede configurar el área que le preocupa con un fondo blanco o negro semitransparente, y aclarará u oscurecerá su elemento.

Supongo que tiene sus limitaciones, pero funciona muy bien para mí.

Answer 4

Esto es solo una modificación de la respuesta de la eyelidlessness de eyelidlessness , ya que vi la misma función dos veces

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

Probablemente te has perdido http://www.safalra.com/web-design/javascript/colour-handling-and-processing/ . Admite los colores HSV y HSL y convierte entre ellos y entre los valores RGB.

HSV y HSL son representaciones de colores mucho más "amigables para el hombre", por lo que usarlos para obtener un color más claro, uno más oscuro, uno más o menos intenso, o encontrar el color con el mejor contraste es extremadamente simple.

Answer 6

Si se refiere a JS del lado del servidor, puede usar Stylus que es un preprocesador de CSS con funciones integradas para hacer los colores más claros / más oscuros, etc.

Answer 7

Simplemente tuve el mismo problema y lo resolví de la siguiente manera, tal vez sea útil para alguien. Para esta solución necesitas dos elementos: el exterior define tu color, el interno se usa para la iluminación. En mi caso, tengo algo como esto:

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

Luego defines 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

Answer 8

esta es una vieja pregunta ... pero esta es mi manera de hacerlo usando replace y 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 9

quizás jquery.colorhelpers.js funciones jquery.colorhelpers.js para scale y add serían jquery.colorhelpers.js ? Sin embargo, estoy tratando de encontrar mejores ejemplos que los que se encuentran en línea para el código fuente de flot.

Answer 10

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;

}

Se encuentra aquí: http://www.sitepoint.com/javascript-generate-lighter-darker-color/

Answer 11

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

Ahora maneja la entrada RGB (A), así como la hexadecimal (3 dígitos o 6).