一行代码识别颜色深浅

前端开发里，颜色玩得好不好直接关系到网页是否给力，特别是搞定那个明暗模式自动切换，简直就是提升用户体验的大招。今天咱们就来聊聊怎么通过一把尺子—亮度（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值，看看能不能找到适合你项目的亮度阈值。掌握了这个原理，前端开发的路上就少了很多颜色上的坎坷。