通过CSS动态地按百分比更改颜色为较浅或较暗。

如果您决定使用基于Sass的CSS框架http://compass-style.org/，它提供了非常有用的darken()和lighten() Sass函数来动态生成CSS。这非常干净简洁。

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

生成

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

据我所知，无法通过CSS实现此功能。但我认为一些服务器端逻辑可以轻松地按照您的建议进行操作。CSS样式表通常是静态资源，但没有理由不能由服务器端代码动态生成。您的服务器端脚本应该：

1. 检查URL参数以确定用户及用户选择的颜色。使用URL参数而不是会话变量，以便仍然可以缓存CSS。
2. 将颜色分解为其红、绿和蓝三个分量。
3. 将每个分量增加一定量。尝试这个过程以获得您想要的结果。
4. 生成包含新颜色的CSS。

链接到生成CSS的页面可能如下所示：

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

如果您不使用.css扩展名，请确保正确设置MIME类型，以便浏览器知道将文件解释为CSS。

（请注意，要使颜色变浅，您必须增加每个RGB值）

color-mix() 函数是 CSS Color Module Level 5 规范中即将加入的新功能。它的主要目的是根据指定的比例混合两种或多种颜色。请查看support。

:root {
  --primary-color: #FF9900;
  --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%);
  --primary-color-light: color-mix(in srgb, var(--primary-color), white 20%);
}

.button {
  background: var(--primary-color);
}

.button:hover {
  background: var(--primary-color-dark);
}

你可以使用一些javascript代码来计算较暗和较亮的颜色，使用rgb()函数。
演示：这并不是很好看，但只是为了说明问题。
它的本质是设置一个颜色，并选择20个具有相同数量（相互比较）的rgb的颜色，仅相差10。

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};

以下代码对我来说可以使颜色变暗 - 只需在悬停时更改50%即可。

.button {
  display: inline-block;
  background-color: green;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}

如果您需要为了兼容旧浏览器而进行暴力破解，可以使用Colllor来自动选择类似的颜色变化。
例如（颜色：#a9dbb4）：

没有直接的方法。但是你可以使用一个网站，例如colorschemedesigner.com，该网站将为您提供基础颜色，然后提供不同范围内的十六进制和RGB代码。

一旦我为我的网站找到了颜色方案，我会将颜色的十六进制代码和名称放在样式表顶部的注释部分中。

其他一些颜色方案生成器包括：

• http://www.colorschemer.com/online.html
• http://colorschemegenerator.com/
• http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

您可以使用RGBa（'a'表示alpha透明度），但目前它的支持还不广泛。但是，它将来会得到支持，因此您现在可以使用它并添加一个回退方案：

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }

我将使用原生CSS3和SVG来回答，而不需要LESS或SASS。

基本上，如果问题是为了全局悬停效果而使颜色变得更亮或更暗，您可以创建一个像这样的SVG数据调用：

Original Answer翻译成"最初的回答"

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

由于某些我不知道的原因，SVG不允许我在"fill"属性中输入十六进制值，但"white"和"black"满足我的需求。

值得思考的问题： 如果您不介意使用图像，只需使用50％透明的PNG作为背景图像即可。如果您想要更加花哨一些，可以调用PHP脚本作为背景图像，并传递HEX和OPACITY值，让它输出上面的SVG代码。

尝试：

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}