Dynamically change color to lighter or darker by percentage CSS

Question

We have a big application on the site and we have a few links which are, let's say blue color like the blue links on this site. Now I want to make some other links, but with lighter color. Obviously I can just do simply by the hex code adding in the CSS file, but our site lets user decide what colors they want for their customized profile/site (like Twitter).

So, my question is: can we reduce the color by percentage?

Let's say the following code is CSS:

a {   color: blue; }  a.lighter {   color: -50%; // obviously not correct way, but just an idea } 

OR

a.lighter {   color: blue -50%;  // again not correct, but another example of setting color and then reducing it } 

Is there a way to reduce a color by a percentage?

Answer 1

You can do this with CSS filters in all modern browsers (see the caniuse compatibility table).

.button {    color: #ff0000;  }    /* note: 100% is baseline so 85% is slightly darker,      20% would be significantly darker */  .button:hover {    filter: brightness(85%);  }

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

Here's more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/