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