JS判断颜色是否为深色 阀值

前言

碰到一个有趣的项目需求，判断颜色的深浅，若为深色则设置浅色阴影；反之，设置深色阴影。

本来没有头绪，怎样从才能知晓她的深浅呢，百度一下就tmd有了结果。

// arr为用于存储rgb的三个数据
var $grayLevel = arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;

知道其原理，则可以开始实践了…

  <div id="app"><div :style="bgc"></div><br><br><button @click="testing">testing</button></div>

    new Vue({el: '#app',data() {return {bgc: {width: '80px',height: '80px',backgroundColor: 'rgb(255,200,255)',margin: '10px',boxShadow: ''}}},methods: {testing() {var color = this.bgc.backgroundColorvar arr = color.replace('rgb(','').replace(')','').split(',').map(Number);console.log(arr);var $grayLevel = arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;console.log($grayLevel);if ($grayLevel >= 192) {this.turnDarkColor(arr)} else {this.turnLightColor(arr)}},turnDarkColor(arr) {var cla = new ColorHandle();var hex = cla.RgbToHex(arr[0],arr[1],arr[2]);this.bgc.boxShadow = "10px 10px 10px 8px " + cla.getDarkColor(hex,0.6)},turnLightColor(arr) {var cla = new ColorHandle();var hex = cla.RgbToHex(arr[0],arr[1],arr[2]);this.bgc.boxShadow = "10px 10px 10px 8px " + cla.getLightColor(hex,0.6)}}})

这里需引入一个颜色转换的js文件：

附上链接

效果图如下：