Φως / Σκούρο χρώμα - CSS-Κόλπα

Anonim

Οι προεπεξεργαστές CSS Sass and Less μπορούν να πάρουν οποιοδήποτε χρώμα darken()ή lighten()και με συγκεκριμένη τιμή. Αλλά καμία τέτοια ικανότητα δεν είναι ενσωματωμένη στο JavaScript. Αυτή η συνάρτηση παίρνει χρώματα σε δεκαεξαδική μορφή (π.χ. # 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);

Διαδήλωση

Δείτε την
αλλαγή χρώματος στυλό σε JavaScript από τον Chris Coyier (@chriscoyier)
στο CodePen.