Ringankan / Gelapkan Warna - Trik CSS

Anonim

Pra-pemproses CSS Sass dan Less dapat mengambil warna dan darken()atau lighten()dengan nilai tertentu. Tetapi tidak ada kemampuan seperti itu yang dimasukkan ke dalam JavaScript. Fungsi ini mengambil warna dalam format hex (iaitu # F06D06, dengan atau tanpa hash) dan menerangi atau menggelapkannya dengan nilai.

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

Penggunaan

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

Demo

Lihat
Perubahan Warna Pena dalam JavaScript oleh Chris Coyier (@chriscoyier)
di CodePen.