July 15, 2019 by Andreas Wik
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.