हल्का / गहरा रंग - सीएसएस-ट्रिक्स

सीएसएस preprocessors सास और कम किसी भी रंग और ले जा सकते हैं darken()या lighten()एक विशिष्ट मूल्य से यह। लेकिन ऐसी कोई क्षमता जावास्क्रिप्ट में नहीं बनाई गई है। यह फ़ंक्शन हेक्स प्रारूप में रंग लेता है (यानी # F06D06, हैश के साथ या बिना) और उन्हें एक मूल्य के साथ हल्का या काला कर देता है।

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

प्रयोग

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

डेमो

CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा जावास्क्रिप्ट में पेन कलर एलर्टेशन देखें।