Basit Basit - 3 months ago 25
CSS Question

Dynamically change color to lighter or darker by percentage CSS (Javascript)

We have a big application on the site and we have a few links which are, lets 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 redcuing it
}


Is there a way to reduce a color by percentage?

Answer

If you're using a stack which lets you use SASS, you can do something like this:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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