How Can I Dynamically Lighten or Darken Colors Using CSS?

Dynamically Lighten or Darken Colors Using CSS Percentage

In web development, customizing user interfaces with colors is crucial. Sometimes, you may need to adjust the color of elements dynamically based on user preferences or specific conditions. However, static hex codes can be limiting if users want a tailored color scheme.

Using CSS Filters

Modern browsers offer a solution using CSS filters. With these filters, you can modify the color of an element by adjusting its brightness percentage. This allows you to lighten or darken the color without changing its hue.

To apply a brightness filter, use the following syntax:

filter: brightness(percentage);

For example, to lighten a color by 50%, you would use:

filter: brightness(50%);

To darken a color by 15%, use:

filter: brightness(85%);

Here's an example to demonstrate the effect:

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

In this example, the "button" class contains a red color. When the button is hovered over, the "button:hover" class applies a brightness filter of 85%, slightly darkening the red color.

The above is the detailed content of How Can I Dynamically Lighten or Darken Colors Using CSS?. For more information, please follow other related articles on the PHP Chinese website!