Làm sáng / Làm tối màu - Thủ thuật CSS

Anonim

Các bộ tiền xử lý CSS Sass và Less có thể có bất kỳ màu nào và darken()hoặc lighten()nó theo một giá trị cụ thể. Nhưng không có khả năng nào như vậy được tích hợp vào JavaScript. Hàm này lấy màu ở định dạng hex (tức là # F06D06, có hoặc không có băm) và làm sáng hoặc tối chúng bằng một giá trị.

function LightenDarkenColor(col, amt) ( var usePound = false; if (col(0) == "#") ( col = col.slice(1); usePound = true; ) var num = parseInt(col,16); var r = (num >> 16) + amt; if (r > 255) r = 255; else if (r <0) r = 0; var b = ((num>> 8) & 0x00FF) + amt; if (b > 255) b = 255; else if (b <0) b = 0; var g = (num & 0x0000FF) + amt; if (g> 255) g = 255; else if (g < 0) g = 0; return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); )

Sử dụng

// Lighten var NewColor = LightenDarkenColor("#F06D06", 20); // Darken var NewColor = LightenDarkenColor("#F06D06", -20);

Bản giới thiệu

Xem phần
Thay đổi màu bút trong JavaScript của Chris Coyier (@chriscoyier)
trên CodePen.