JavascriptUIHEXRGB

Lighter or Darker Color with JavaScript

It's quite easy to make a color lighter or darker using JavaScript. The purpose of this interactive content is to see how this can be achieved and to explore some things we've used before from different perspectives. At the end of this article, you will see a code example.

#8b8b8b
#373737

We need to separate the HEX code according to colors. Each pair of characters determines the value of a different color. The first two characters after the # symbol determine the red color, the next two characters determine the green color, and the last two characters determine the blue color.

Split HEX Code
8b
8b
8b

Now we can convert each HEX color value into the RGB format. This way, we will be able to manipulate each color value more easily and separately.

HEX
8b
8b
8b
HEX to RGB
RGB
139
139
139

Now, to make a color lighter or darker, what we need to do is determine the extent to which we want it to be lighter or darker. For this example, we can enter a value between 0 and 100. With this ratio, we can increase or decrease the values of the colors. This way, the color can appear darker or lighter accordingly.

Original RGB
139
139
139
%60DarkerLighter
Manipulated RGB
-8455
-8455
-8455

We have now reached the final step. Using the manipulated RGB value, we can create a new HEX code. This way, we will obtain a color that is either lighter or darker to the desired extent.

Manipulated RGB
55
55
55
RGB to HEX
New HEX
37
37
37

And the result... No code examples have been provided in this part of the article. The reason for this is to ensure our understanding of the concepts and to avoid memorization in the field of software development. We delve deeper into the commonly known RGB and HEX codes and learn how to manipulate them. I hope this article has provided a deeper insight into understanding some color codes that many of us see every day and has broadened your horizons.

#8b8b8b
#373737

If you'd like to see a code example, you can check out this demo link.



If this content helped you, you can buy me a coffee.
Related: Perfect Nested Rounded Corners

You can join the newsletter to be notified of awesome interactive articles and courses about software and design. You will receive at most a few emails per month.


+80

Join to our Supporters or Sponsors