Açıklaştır / Koyulaştır Renk - CSS Hileleri

Anonim

CSS ön işlemcileri Sass ve Less, herhangi bir rengi darken()veya lighten()belirli bir değeri alabilir. Ancak JavaScript'te böyle bir yetenek yerleşik değildir. Bu işlev renkleri onaltılık formatta alır (yani # F06D06, karmayla veya karmasız) ve bunları bir değerle açıklaştırır veya koyulaştırır.

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

Kullanım

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

Demo


CodePen'de Chris Coyier (@chriscoyier) tarafından JavaScript'te Kalem Rengi Değişikliğine bakın
.