Search code examples
csscolors

Dynamically change color to lighter or darker by percentage CSS

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?

Solution

  • If you're using a stack which lets you use SASS, you can use the lighten function:

    $linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}