我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在CSS文件中添加十六进制代码来做，但我们的网站让用户决定他们想要的自定义配置文件/网站(如Twitter)的颜色。
所以，我的问题是:我们能减少百分比的颜色吗?
让我们说下面的代码是CSS:
a {
color: blue;
}
a.lighter {
color: -50%; // obviously not correct way, but just an idea
}
OR
a.lighter {
color: blue -50%; // again not correct, but another example of setting color and then reducing it
}
有没有办法将颜色减少一个百分比?
当前回答
如果你想要更暗的颜色，你可以使用低不透明度的rgba黑色:
rgba(0, 0, 0, 0.3);
打火机用白色:
rgba(255, 255, 255, 0.3);
其他回答
您可以使用一点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)) );
};
不直接，不。但是你可以使用一个网站，比如colorschemedesigner.com，它会给你基本颜色，然后给你不同范围的基本颜色的十六进制和rgb代码。
一旦我找到了我的网站配色方案，我就把颜色的十六进制代码放在样式表顶部的评论部分中并命名它们。
其他一些配色方案生成器包括:
http://www.colorschemer.com/online.html http://colorschemegenerator.com/ http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/
自2020年1月以来，所有现代浏览器都支持100%的过滤器。甚至UC浏览器的Android(而不是Chrome，在80美元的手机上)也支持它。
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
此外，你可以用CSS变量动态控制这一点，自2017年10月以来，大多数浏览器(不包括QQ)都支持CSS变量:
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
不是我的项目，但有一个很好的例子，可以看到现代CSS是多么伟大，看看:MVP.css
原来的答案
如果你使用的堆栈允许你使用Sass或Less，你可以使用点亮函数:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
还有一种暗色调，效果相同，但方向相反。
存在“不透明度” 这将使背景闪闪发光:
opacity: 0.5;
但我不确定你是这个意思。定义“减色”:透明?或者加白色?
如果你想要更暗的颜色，你可以使用低不透明度的rgba黑色:
rgba(0, 0, 0, 0.3);
打火机用白色:
rgba(255, 255, 255, 0.3);
