Dynamically Change Color to Lighter or Darker by Percentage

To maintain the interactivity and attractivity of the website, developers often want to change the element’s colors after some time. More specifically, CSS permits developers to change the color dynamically. It works in such a way that a quantity is multiplied between 0 and 1 to make the color darker or lighter. Moreover, the default darkness will be stated as “1”, which applies no color effect on the selected element.

This post will demonstrate:

• How to Dynamically Change Color to Darker by Percentage?
• How to Dynamically Change Color to Lighter by Percentage?

How to Dynamically Change Color to Darker by Percentage?

In CSS, the value of the “filter” property is utilized for applying effects. This property inserts high-resolution graphical effects like color, a little blur, or full blur into an element. More specifically, filters are commonly used to adjust the rendering

To dynamically change color to darker by setting the value of the “filter” property in percentage, check out the below-given instructions.

Step 1: Make a <div> Container

First of all, make the div container with the help of the “<div>” element and also insert a class attribute with a specific name according to your preference.

Step 2: Create a Button

Next, utilize the “<button>” element to create a button in between the opening and closing tag of the div:

Output

Step 3: Access Button

Now, utilize the class name with the class selector “.button” to access the button.

Step 4: Apply CSS Properties

Then, apply the below-listed properties:

Here:

• “margin” property is utilized for specifying the blank space outside of the boundary.
• “width” specifies the element size horizontally.
• “border” defines a boundary around the element.
• “padding” is used to allocate the space inside the defined boundary.
• “color” property is utilized for setting the color of the element.
• “background-color” determines a color for the backside of the element in the boundary.
• The “font-weight” value determines the thickness of the font.
• “font-size” specifies the size for the font as large.
• “font” is a shorthand property utilized to allocate the font.

Output

Step 5: Change Color to Full Darker

Access the button with the hover pseudo-class property. This matches when the user links an element with a mouse. However, it can not initiate it:

In the above code snippet, the “filter” property is utilized for specifying the effect on the element. Here, we have set the “brightness(0%)” to darker the element.

With the 0% percentage value, the button color will turn dark, which ultimately hides the caption:

To handle this situation, “filter” with the value “(50%)” is applied:

The “brightness(50%)” shows the color changes fifty percent of the effect.

Output

How to Dynamically Change Color to Lighter by Percentage?

To dynamically change color to lighter by percentage, set the value of the “filter” property greater than 50%.

For instance, we will set the value brightness to “80%”:

It can be observed that when the user moves the cursor over the button, the hover effect color become lighter:

However, setting the “100%” brightness value does not affect the color:

Output

We have taught you about dynamically changing color to lighter or darker by percentage.

Conclusion

To dynamically change color to lighter or darker by percentage, the “filter” property is used. This property then invokes the “brightness()” function for applying the brightness effect. You can set its value in percentage from 0 to 100, where the small value changes the color to dark, and the large number makes it lighter. Moreover, 100% is the standard brightness that adds no effect on color. This article explained the procedure of dynamically changing the color by percentage.