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

Recommended articles