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

在看这篇文章的不少童鞋们，应该有不少平时会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分享：github.com/linger777/x… gitee分享：gitee.com/linger777/x… 有须要的童鞋自取。如何使用这里就不赘述了，点击上述连接就可看到。

番外

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

---

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