我画了个色彩叠加计算器-CFANZ编程社区

这是我的专栏《前端入门到进阶》，跟HullQin学前端，入门到进阶！带你进大厂！

背景

在上篇文章《不枚举，微信WeUI如何巧妙定义白天、暗夜模式各主色的active态色号？》中，我说过微信的WeUI是通过叠加一个半透明的遮罩层，实现元素的active状态样式的。

如果我们像WeUI那样，定义一个遮罩层，那么这个遮罩层应该取什么色号呢？它跟各种颜色叠加后，展示的颜色是什么样子呢？

所以，我需要一个「色彩叠加计算器」工具，可以帮我方便的调试颜色～

当然，网上有很多现成的工具了，但我就是爱玩儿，希望在自己网站部署一个方便的、没广告的工具。所以自己用100多行原生JS写了这个工具，分享给大家。

我画了个色彩叠加计算器_CSS

工具地址 & 源码

工具地址：tool.hullqin.cn/color-mixer…

源码：github.com/HullQin/too…

功能说明书

允许用户输入十六进制的色号（#xxxxxx格式）、也允许输入rgba这种十进制的色号（rgba格式）。
支持上述两种色号格式的互相转换。
允许叠加多种颜色，用户可以主动增加颜色。
展示色彩叠加时，要体现出谁叠加在谁上面（通过大、小圆盘展示，小圆盘放在大圆盘上方）。
参数可以保存、分享。

来吧，展示

上图是我画的彩虹（截取左上角就是彩虹🌈了），参数如下：tool.hullqin.cn/color-mixer…

我画了个色彩叠加计算器_前端_02

上图是是微信WeUI的primary color叠加白天模式active遮罩层的效果：

tool.hullqin.cn/color-mixer…

开发时，有趣的故事

色号转换

我想JS原生也许有转换两种格式色号的方法，但搜索后无果。借助JS原生，只可以把任意格式的色号转换为rgba格式，方法如下：

const color = '#aaaaaadd';
const showEle = document.createElement('div');
document.body.appendChild(showEle);
showEle.style.backgroundColor = color;
const rgbaColor = getComputedStyle(showEle).backgroundColor;
document.body.removeChild(showEle);
console.log(rgbaColor);

输出结果：rgba(170, 170, 170, 0.867)。

但是我确实需要实现该功能：把rgba格式转换为hex格式。于是只好自己手写，还好，只需要一行代码：

const rgbToHex = c => '#' + c.replace(/rgba?(/, '').replace(')', '').split(', ').map(num => (num.includes('.') ? Math.round(Number(num) * 255) : Number(num)).toString(16).padStart(2, '0')).join('');

思路如下：由于参数c是getComputedStyle计算的结果，格式比较固定，是rgb(xx, xx, xx)或者rgba(xx, xx, xx, x.xxx)格式。所以就大胆的把头部rgba(和尾部的)先删掉，再根据, 分割开，针对每一部分，若有小数点就乘以255取整，然后转换为16进制，补前缀0，最后拼接即可。

为什么不支持hsla

~~因为懒~~

因为个人开发时只用到hex和rgba格式，开发时间有限，所以暂时没做。

关于input元素的排布

为什么是三列div？而不是N行div？

我画了个色彩叠加计算器_前端_03

这是为了方便，我输入颜色时，习惯输入一个后按Tab继续输入下一个。

我起初为了方便，是按照N行div开发的，但是这样，每次在Hex输入框按下Tab后，光标就去RGB输入框了。需要再按一次Tab才能进入下一行的Hex输入框。如果以后支持了HSL，那就需要按3次了。

所以我改成了这种3列div，保证每次输入完毕，按Tab后，直接切换到下一行的输入框。

背景