скажем, у меня есть код цвета # 404040. Как создать новый цветовой код, который светлее или темнее на 20% (или задан x%)? Мне нужно это для создания цвета наведите на динамический сайт (какой цвет меняется с помощью темы). Поэтому невозможно использовать другой класс или: наведите указатель на предопределенный класс.
Спасибо
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);
Теперь обрабатывает вход RGB (A), а также шестнадцатеричный (3 цифры или 6).
Вы можете сделать частично прозрачный белый или черный PNG и наложение (подкладка?) на зависании:
div.button {
background-color: #404040;
}
body>div.button:hover {
background-image: url('blackpixel.png');
}
Нет необходимости в 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;
}
Найдено здесь: http://www.sitepoint.com/javascript-generate-lighter-darker-color/
Вам просто нужно добавить (для более легкого) или вычесть (для более темного) равные количества от каждого из компонентов R, G, B.
Посмотрите Domino 2.0, которая представляет собой небольшую библиотеку javascript, которая делает именно это.
Это старый вопрос.. но вот мой способ сделать это, используя replace и 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);
});
У меня была одна и та же проблема, и я решил ее следующим образом, возможно, полезной для кого-то. Для этого решения вам нужны два элемента: внешний определяет ваш цвет, внутренний - для подсветки. В моем случае у меня есть что-то вроде этого:
<div class="button"><a href="#">Hi Color</a></div>
Затем вы определяете в CSS:
.button {
display: inline-block;
background-color: blue;
}
.button a {
display: inline-block;
}
.button a:hover {
background-color: rgba(255,255,255,0.5);
}
Это всего лишь модификация ответа без ведома, поскольку я дважды видел ту же функцию
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);
возможно jquery.colorhelpers.js функции для масштабирования и добавления помогут? Однако я пытаюсь найти лучшие примеры, чем в исходном коде для флота.
Возможно, вы пропустили http://www.safalra.com/web-design/javascript/colour-handling-and-processing/. Он поддерживает цвета HSV и HSL и конвертирует между ними и между значениями RGB.
HSV и HSL представляют собой гораздо более "дружественные к человеку" представления цветов, поэтому использование их делает более светлый цвет, более темный, более или менее насыщенный, или поиск цвета с наилучшим контрастом чрезвычайно прост.
Я нашел способ просто использовать CSS, похожий на решение Wander Nauta, но без использования изображения. Если вы можете изменить html, просто поместите div за область, которую вы хотите изменить, с исходным цветом, установленным в качестве фона. Затем вы можете настроить область, о которой вы беспокоитесь, с полупрозрачным белым или черным фоном, и вы будете осветлять или затемнить свой элемент.
Я предполагаю, что у него есть свои ограничения, но он отлично работает для меня.
Если вы имеете в виду серверную JS-систему, вы можете использовать Stylus, который является препроцессором CSS со встроенными функциями для создания ярких/темнее и т.д.