我画了个色彩叠加计算器

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

背景

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

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

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

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

工具地址 & 源码

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

源码：​​github.com/HullQin/too…​​

功能说明书

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

来吧，展示

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

上图是是微信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？

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

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

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

写在最后