How to fade color in JavaScript – 1 Best Way

In this tutorial I shall teach you how to fade color in javascript. So without wasting your time let’s start the tutorial.

Step 1 – Create a blank html document

First step is to create a new blank html document with some basic code as shown in the screenshot below.

Step 2 – Apply background color to body using CSS

Now let’s apply background color to the body using simple css. As shown in the screenshot below.

In the above screenshot you can see I have applied background color on the body of the document using the style tag in the body.

Now let’s render it in the web browser to see the results.

You can see that our entire window is now black. It means our color is applied to the body.

Step 3 – fade background color using javascript

Now let’s use javascript to fade the background color.

In the above screenshot you can see I have added some javascript code in the script tag.

Now let’s understand this line by line.

In line 12 I have got the body element by the “querySelector” method of javascript. 

Next line shows that I am trying to apply background color to the body element using javascript.

And on the right side of the “=” sign you can see a string is written and there is a message which I have written for you. So that we could understand the main point.

There is a function in CSS that is called “hsla”. This function gets 3 different values of the color, hue, saturation, light and alpha.

But we don’t have those values yet, but hexadecimal color of course. 

Now we want to convert hexadecimal color to hsla color values.

Now if you are using google chrome web browser you can go to the developer tools of that browser by using shortcut keys “CTRL+SHIFT+i”

And a new developer tool window will opened as shown in screenshot below

Now in the above screenshot you can see in the styles tab. Background color property is appearing which we applied in our document.

When you click on the black square of color, a color picker will be opened as shown in the screenshot below.

When this dialog appears you can click on the red highlighted arrows until hsla values appear like in the screenshot below.

Now you have converted the color from hexadecimal to hsla color. 

Now let’s write these values in our javascript code.

Step 4 – Apply hsla values in javascript code

Now on line #13 You can see I have applied hsla value to our body background color.

Now let’s see whether our color has faded in the web browser or not.

In the above screenshot you can see we have successfully faded black color opacity from 100% to 50% by using hsla function of css.

You may also like

• How to create a play button in CSS – 1 Best Way
• How to put an image in the center in CSS