Mencerahkan / Menggelapkan Warna - Trik CSS

Anonim

Sass dan Less preprocessor CSS dapat mengambil warna apa pun dan darken()atau lighten()dengan nilai tertentu. Tetapi tidak ada kemampuan seperti itu yang dibangun ke dalam JavaScript. Fungsi ini mengambil warna dalam format hex (yaitu # F06D06, dengan atau tanpa tanda pagar) dan mencerahkan atau menggelapkannya dengan sebuah 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); )

Pemakaian

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

Demo

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