我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接，但是用浅一点的颜色。显然，我可以简单地通过在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
}
有没有办法将颜色减少一个百分比?
当前回答
Try:
a {
color: hsl(240, 100%, 50%);
}
a:hover {
color: hsl(240, 100%, 70%);
}
其他回答
请看我对Ctford回复的评论。
我认为使颜色变亮的简单方法是将每个RGB组件加到0xff并除以2。如果这不能给出你想要的确切结果，用0xff减去当前值乘以某个常数，然后加回当前值。例如，如果你想向白色方向移动1/3，取(0xff - current)/3+current。
你得先试一下，看看结果如何。我担心，根据这个简单的公式，一个大到足以使深色颜色很好地褪色的因素可能会使浅色颜色完全变白，而一个小到足以使浅色颜色只变亮一点的因素可能会使深色颜色不够亮。
尽管如此，我还是认为，与固定步数相比，向白色移动一小部分距离更有希望。
自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%);
}
还有一种暗色调，效果相同，但方向相反。
您可以使用一点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)) );
};
Try:
a {
color: hsl(240, 100%, 50%);
}
a:hover {
color: hsl(240, 100%, 70%);
}
在写这篇文章的时候，这里是我发现的最好的纯CSS颜色操作实现:
使用CSS变量以HSL而不是HEX/RGB格式定义颜色，然后使用calc()来操作它们。
这里有一个基本的例子:
:root { --link-color-h: 211; --link-color-s: 100%; --link-color-l: 50%; --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l); --link-color: hsl(var(--link-color-hsl)); --link-color-10: hsla(var(--link-color-hsl), .1); --link-color-20: hsla(var(--link-color-hsl), .2); --link-color-30: hsla(var(--link-color-hsl), .3); --link-color-40: hsla(var(--link-color-hsl), .4); --link-color-50: hsla(var(--link-color-hsl), .5); --link-color-60: hsla(var(--link-color-hsl), .6); --link-color-70: hsla(var(--link-color-hsl), .7); --link-color-80: hsla(var(--link-color-hsl), .8); --link-color-90: hsla(var(--link-color-hsl), .9); --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l)); --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l)); --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l)); --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l)); --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9)); --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9)); } .flex { display: flex; } .flex > div { flex: 1; height: calc(100vw / 10); } <h3>Color Manipulation (alpha)</h3> <div class="flex"> <div style="background-color: var(--link-color-10)"></div> <div style="background-color: var(--link-color-20)"></div> <div style="background-color: var(--link-color-30)"></div> <div style="background-color: var(--link-color-40)"></div> <div style="background-color: var(--link-color-50)"></div> <div style="background-color: var(--link-color-60)"></div> <div style="background-color: var(--link-color-70)"></div> <div style="background-color: var(--link-color-80)"></div> <div style="background-color: var(--link-color-90)"></div> <div style="background-color: var(--link-color)"></div> </div> <h3>Color Manipulation (Hue)</h3> <div class="flex"> <div style="background-color: var(--link-color-warm)"></div> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-cold)"></div> </div> <h3>Color Manipulation (Saturation)</h3> <div class="flex"> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-low)"></div> <div style="background-color: var(--link-color-lowest)"></div> </div> <h3>Color Manipulation (Lightness)</h3> <div class="flex"> <div style="background-color: var(--link-color-light)"></div> <div style="background-color: var(--link-color)"></div> <div style="background-color: var(--link-color-dark)"></div> </div>
我还创建了一个CSS框架(仍处于早期阶段)来提供基本的CSS变量支持，称为根变量。
