我可以更改 CSS 中颜色的单个参数吗？

Question

当我在 Adob​​e Illustrator 中设计东西时，我喜欢选择一种颜色，然后调整它的亮度或饱和度，让自己成为“同族”的相似颜色。

在CSS中，你可以用这些值来定义颜色：RGB、RGBA、HSL……既然你可以同时定义所有三个参数，我想了很久：有没有办法改变一个那些单参数？

例如，假设我将三个链接定义为具有非常“漂亮”的颜色 #FF0000、#00FF00 和 #0000FF。是否可以创建一个单一的 CSS 规则来说明“在所有链接悬停时，无论其颜色如何，将其亮度/亮度降低 10%”？

我也很想对 RGBA 颜色的 alpha 参数做同样的事情。我所知道的唯一一种不加选择地影响所有颜色的通用方法是 opacity 属性，但如果我只想影响背景，这就会变成一个问题。

这样的事情（仅影响 H、S 或 L）听起来很简单：如果您可以重新定义整个颜色，您就不能再次采用相同的颜色并更改其中一个值吗？但问题是：有没有人想过真正想办法做到这一点？

Answer 1

我建议研究 SASS 和 LESS，它们可以为您完成此任务以及更多。

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

或者您可以使用 jQuery 来完成此操作，如以下问题所述：

Increase CSS brightness color on click with jquery/javascript?

Answer 2

您可以使用 rgba 值并调整不透明度来获得类似的效果。例如：

color: rgba(0, 0, 0, 1.0);

这代表纯黑色。括号中的最后一位数字会影响不透明度。您可以将其从 1.0 调整为 0.5 以获得更浅的颜色（假设文本后面是浅色背景）。

当我懒得获取灰色阴影的特定十六进制值时，我经常这样做（但它也适用于任何颜色）。