小程序插件—随机生成搭配的背景色和文本色

在看这篇文章的很多童鞋们，应该有很多平时会code一些东西，也相信多少有过这样的小烦恼：视觉对不同的块想要有所区分，呈现出的界面显单调啊...，此时大家估计已经猜到我们需要什么，对，颜色！eh～，那这块用这个色，那块用这个色，开始还都美感爆棚，挑来挑去搭配的不亦乐乎。可是过阵子，啊～ 这个用哪个色呀 这个色用的太多了 这个不好看啊、没色可挑了 en 在修来改去 十几分钟过去了～ 最后，颜色还是那么不好看，还影响了心情！
自己设置颜色值，效果不好、浪费时间还影响心情，那咋办？灵光一闪，随机生成呗！秒出还不影响心情，还能每次看到不同的色彩。 那如何随机呢，现在我们走入本文正题。

主要功能

随机生成视觉搭配的背景色和文本色

设计原理

通过随机生成色值，解决了我们对颜色的需求。但如何生成，要生成什么样的，才是重点。，这里仅鉴于我对色彩搭配的浅薄了解，作出如下设计：

1. 背景色和文本色采用互补的方式进行搭色，已最大概率的保证随机出的背景色和文本色深浅明显，易于辨别；
2. 采用颜色的rgb值，通过随机方法生成0-255之间的数，分别赋给rgb的三个值r,g,b；
3. 经实践，为美观一点，背景色给予20的透明度。
4. 综上，背景色即为rgba(r,g,b,.2)，文本色即为rgb(r,g,b)

具体实现

依上述原理进行如下实现：

1. 随机生成0-255之间的数
   Math.round(Math.random()*255)
2. 生成背景色和文本色

let c = [Math.round(Math.random()*255), Math.round(Math.random()*255), Math.round(Math.random()*255)] 
let bgColor = 'rgba('+c[0]+','+c[1]+','+c[2]+',.2)'
let color = 'rgb('+ (255-c[0]) + ',' + (255-c[1]) + ',' + (255-c[2]) + ')'

就这样，一个简单的搭配色生成器就出来了，要你不再烦恼😊。完整代码呈现如下：
github分享：https://github.com/linger777/xiaochengxu/blob/master/xcxmodule/src/readmes/GENERATECOLOR.md
gitee分享：https://gitee.com/linger777/xiaochengxu/blob/master/xcxmodule/src/readmes/GENERATECOLOR.md
有需要的童鞋自取。如何使用这里就不赘述了，点击上述链接就可看到。

番外

估计看过后的童鞋，会觉得就这么简单就完事了吗？是的，目前就是这样了～，以后若遇到更好的颜色搭配理论支撑，将及时调整实现。

---

PS：小伙伴们在使用过程中，如有好的想法，欢迎提出宝贵建议，一起改进。