前端开发里,颜色玩得好不好直接关系到网页是否给力,特别是搞定那个明暗模式自动切换,简直就是提升用户体验的大招。今天咱们就来聊聊怎么通过一把尺子—亮度(Luminance),来量量这颜色究竟“重”不“重”。
亮度啊,简单说就是看这颜色亮堂堂的还是暗沉沉的。就像穿白T在大太阳下,凉飕飕的,因为它反射了大把的光,亮度就高嘛。
搞懂了这个,接下来就是技术时间。怎么把颜色的RGB值变魔术,转化成亮度值呢?看代码:
// 把RGB值变成亮度的魔法函数
function getLuminance(r, g, b) {
// 先把RGB值缩小到0到1之间
const a = [r, g, b].map(function(v) {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
});
// 再来个小算术,算出亮度
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
// 这个颜色是亮是暗,一测便知
function colorIsLightOrDark(r, g, b) {
const luminance = getLuminance(r, g, b);
return luminance > 0.179 ? 'light' : 'dark';
}
// 来,试试看
console.log(colorIsLightOrDark(255, 255, 255)); // 亮的
console.log(colorIsLightOrDark(0, 0, 0)); // 暗的
这段代码其实就是先把RGB值从满格的255压缩成手掌大小的0到1,然后按照W3C大佬们的秘方算出亮度来。通过这个亮度值,和一个叫做0.179的小哥比一比,就能知道这颜色是属于光明派还是暗影派了。
为啥咱们要这么折腾呢?主要是为了让网页对所有人都友好,包括那些视觉上有障碍的朋友们。调整颜色亮度,让他们也能愉快地浏览,这是咱们做开发的一份责任和担当。
应用这套玩意儿,尤其是在网页自动切换明暗模式的时候,能大显身手。比如自动判定背景色的亮暗,就能决定文字用什么颜色,保证阅读体验上乘。
怎么样,是不是觉得有点意思?试试看调整RGB值,看看能不能找到适合你项目的亮度阈值。掌握了这个原理,前端开发的路上就少了很多颜色上的坎坷。