Generate Brighter And Darker Versions Of Color With JavaScript
July 15, 2019 by Andreas Wik
TinyColor is a fantastic JavaScript library that can help you out with a whole bunch of tasks when you’re working with colors.
Let’s take a look at how we dynamically can generate brighter and darker versions of a color.
Download and include tinycolor.js on your page (or use a CDN, which is what I’ll do).
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<script>
// My code here
</script>
Now, to generate a darker version of a color all we need to do is to create a color object by passing a hex code string to tinycolor, and then run the function darken(value), passing it a value between 0 and 100, depending on how much darker you want it.
// My original color
var originalColor = tinycolor("#ff0000");
// New, darker color
var newColor = originalColor.darken(25).toString();
console.log(newColor);
To get a bright version of the color, just use brighten() instead, again passing it a value between 0 and 100, representing how bright of a color you want to get back.
// My original color
var originalColor = tinycolor("#ff0000");
// New, darker color
var newColor = originalColor.brighten(25).toString();
console.log(newColor);
You don’t have to pass a hex code value to the functions above, you can pass an RGB value or even just a string such as “red”.
// My original color
var originalColor = tinycolor("red");
There is so much more you can do with TinyColor and I strongly recommend you head over and check out the documentation.
See the Pen Generate brighter and darker versions of color with JavaScript by Andreas Wik (@andreaswik) on CodePen.
Happy colorizing!
Share this article
