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

在看這篇文章的很多童鞋們，應該有很多平時會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：小夥伴們在使用過程中，如有好的想法，歡迎提出寶貴建議，一起改進。