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

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