Dynamically change color to lighter or darker by percentage CSS

You can do this with CSS filters in all modern browsers (see the caniuse compatibility table).

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

<button class=button>Foo lorem ipsum</button>

Heres more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/

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 thats great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

Original Answer

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

Theres also darken which does the same, but in the opposite direction.

Dynamically change color to lighter or darker by percentage CSS

There is opacity
which will make the background shine through:

opacity: 0.5;

but Im not sure this is what you mean. Define reduce color: Make transparent? Or add white?