通过百分比CSS（Javascript）动态地将颜色更改为较亮或较暗

Question

我们在该网站上有一个庞大的应用程序，并且我们有一些链接，比如我们网站上的蓝色链接就是蓝色。现在，我想建立其他一些链接，但颜色要浅一些。显然，我可以简单地通过在CSS文件中添加十六进制代码来完成此操作，但是我们的站点允许用户确定其自定义配置文件/站点（例如Twitter）所需的颜色。

所以，我的问题是：我们可以按百分比减少颜色吗？

假设以下代码是CSS：

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

要么

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then reducing it
}

有没有一种方法可以减少一定百分比的颜色？

Answer 1

如果使用的堆栈允许您使用SASS，则可以使用以下lighten函数：

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}