Tạo màu sáng/tối hơn trong css bằng cách sử dụng javascript

Question

giả sử tôi có mã màu # 404040. Cách tạo mã màu mới nhạt hơn hoặc tối hơn 20% (hoặc cho x%)? Tôi cần điều này để tạo ra một màu di chuột trong một trang web động (mà màu sắc đang thay đổi bằng cách sử dụng chủ đề). Do đó, không thể sử dụng lớp khác hoặc: di chuột với lớp được xác định trước.

Cảm ơn

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

Bây giờ xử lý RGB (A) đầu vào, cũng như hex (3 chữ số hoặc 6).

Answer 2

Về cơ bản, bạn chỉ cần thêm (cho nhẹ hơn) hoặc trừ (cho tối hơn) số lượng bằng nhau từ mỗi thành phần R, G, B.

Hãy xem Domino 2.0 là thư viện javascript nhỏ chỉ thực hiện việc đó.

Answer 3

Bạn có thể làm cho một PNG một phần trong suốt màu trắng hoặc màu đen và lớp phủ (underlay?) Nó trên di chuột:

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

Không JS yêu cầu.

Answer 4

Đây chỉ là một sự sửa đổi của eyelidlessness 'câu trả lời, vì tôi thấy các chức năng tương tự hai lần

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

lẽ jquery.colorhelpers.js chức năng cho quy mô và thêm sẽ giúp đỡ? Tôi đang cố gắng tìm các ví dụ tốt hơn là được tìm thấy trong dòng cho mã nguồn flot, tuy nhiên.

Answer 6

Có thể bạn đã bỏ lỡ http://www.safalra.com/web-design/javascript/colour-handling-and-processing/. Nó hỗ trợ HSV và HSL màu sắc và chuyển đổi giữa chúng và giữa các giá trị RGB.

HSV và HSL là biểu tượng màu sắc "thân thiện với con người" hơn, vì vậy sử dụng màu sắc nhẹ hơn, màu tối hơn, màu đậm hơn hoặc ít màu hơn hoặc tìm màu với độ tương phản tốt nhất là cực kỳ đơn giản.

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

Tôi tìm thấy một cách chỉ sử dụng CSS, tương tự như Lang thang giải pháp Nauta, nhưng mà không sử dụng một hình ảnh. Nếu bạn có thể thay đổi html, chỉ cần đặt một div đằng sau khu vực bạn muốn thay đổi với màu gốc được đặt làm nền. Sau đó, bạn có thể thiết lập khu vực mà bạn quan tâm với nền màu trắng hoặc đen nửa trong suốt và bạn sẽ làm sáng hoặc làm tối phần tử của mình.

Tôi đoán nó có những hạn chế của nó, nhưng nó hoạt động tuyệt vời cho tôi.

Answer 9

đây là câu hỏi cũ .. nhưng đây là cách tôi thực hiện bằng cách thay thế và chia nhỏ.

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

Nếu bạn có nghĩa là phía máy chủ JS sau đó bạn có thể sử dụng Stylus mà là một tiền xử lý CSS với chức năng built-in để làm màu sắc nhẹ hơn/tối hơn, vv

Answer 11

Tôi chỉ có cùng một vấn đề và tôi giải quyết nó như sau, có thể hữu ích cho ai đó. Đối với giải pháp này, bạn cần hai yếu tố bên ngoài xác định màu sắc của bạn, một trong những bên trong được sử dụng cho các hightlighting.Trong trường hợp của tôi, tôi có một cái gì đó như thế này:

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

Sau đó, bạn xác định trong 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