Dynamically change color to lighter or darker by percentage CSS

colors, css

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%);
}

Problem

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?

Original source

Related problems