Dynamically change color to lighter or darker by percentage CSS
All modern browsers have had 100% filter
support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css
Original Answer
If you're using a stack which lets you use Sass or Less, you can use the lighten
function:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
There's also darken
which does the same, but in the opposite direction.
Make background-color darker dynamically without making text color darker
After trying different methods I came up with this solution using box-shadow
.
box-shadow: -200px -200px 0px 200px rgb(0 0 0 / 10%) inset
/* This is an inset `box-shadow` and will not affect the color of the text. */
Cross platform solution:
box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
-webkit-box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
-moz-box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
How to generate a CSS color that is some specific percentage lighter/darker using JavaScript
var pad = function(num, totalChars) {
var pad = '0';
num = num + '';
while (num.length < totalChars) {
num = pad + num;
}
return num;
};
// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
// Trim trailing/leading whitespace
color = color.replace(/^\s*|\s*$/, '');
// Expand three-digit hex
color = color.replace(
/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
'#$1$1$2$2$3$3'
);
// Calculate ratio
var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
// Determine if input is RGB(A)
rgb = color.match(new RegExp('^rgba?\\(\\s*' +
'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
'\\s*,\\s*' +
'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
'\\s*,\\s*' +
'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
'(?:\\s*,\\s*' +
'(0|1|0?\\.\\d+))?' +
'\\s*\\)$'
, 'i')),
alpha = !!rgb && rgb[4] != null ? rgb[4] : null,
// Convert hex to decimal
decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
/^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
function() {
return parseInt(arguments[1], 16) + ',' +
parseInt(arguments[2], 16) + ',' +
parseInt(arguments[3], 16);
}
).split(/,/),
returnValue;
// Return RGB(A)
return !!rgb ?
'rgb' + (alpha !== null ? 'a' : '') + '(' +
Math[darker ? 'max' : 'min'](
parseInt(decimal[0], 10) + difference, darker ? 0 : 255
) + ', ' +
Math[darker ? 'max' : 'min'](
parseInt(decimal[1], 10) + difference, darker ? 0 : 255
) + ', ' +
Math[darker ? 'max' : 'min'](
parseInt(decimal[2], 10) + difference, darker ? 0 : 255
) +
(alpha !== null ? ', ' + alpha : '') +
')' :
// Return hex
[
'#',
pad(Math[darker ? 'max' : 'min'](
parseInt(decimal[0], 10) + difference, darker ? 0 : 255
).toString(16), 2),
pad(Math[darker ? 'max' : 'min'](
parseInt(decimal[1], 10) + difference, darker ? 0 : 255
).toString(16), 2),
pad(Math[darker ? 'max' : 'min'](
parseInt(decimal[2], 10) + difference, darker ? 0 : 255
).toString(16), 2)
].join('');
};
var lighterColor = function(color, ratio) {
return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
return changeColor(color, ratio, true);
};
// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);
Now handles RGB(A) input, as well as hex (3 digit or 6).
Dynamically change the color button background to darker according to its parent background color
Change background-color: transparent;
to background-color: rgba(0,0,0, 0.4);
.
You can adjust the opacity accordingly
.a { background-color: #309549;}
.b { background-color: #9d0059;}
.c { background-color: #cc3f10;}
button { background-color: rgba(0,0,0, 0.4); /*Changed*/ border-color: white; color: white}
<div class="a"> <img alt="img"> <button>Test</button></div><div class="b"> <img alt="img"> <button>Test</button></div><div class="c"> <img alt="img"> <button>Test</button></div>
Related Topics
Why Doesn't This A:Visited CSS Style Work
Style ≪Select≫ Element Based on Selected ≪Option≫
Css Background Opacity With Rgba Not Working in Ie 8
How to Make React CSS Import Component-Scoped
How to Remove the Outline Around Hyperlinks Images
Full-Screen Responsive Background Image
What's the Difference Between Inline Styles VS Classes
Expand Div from the Middle Instead of Just Top and Left Using CSS
Import .CSS File into .Less File
Css Text-Decoration Property Cannot Be Overridden by Child Element
Is Background-Position-X (Background-Position-Y) a Standard W3C CSS Property
How to Overwrite Styling in Twitter Bootstrap
Wait For Fonts to Load Before Rendering Web Page
Transition Background-Color Via Slide Animation