Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

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

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?
by

2 Answers

rahul07
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%);
}
RoliMishra
There is "opacity" which will make the background shine through:

opacity: 0.5;

Login / Signup to Answer the Question.