TEXTColor.js

我把该函数封装起来了，你可以通过npm install或者引入github目录下的textcolor.js使用。

使用场景

自定义主题色时，往往会遇到一个问题就是背景色可能会和文字的颜色重叠。

安装

方法一：通过npm引入

npm install textcolor --save

方法二：通过<script>引入

<script type="type/javascript" src="https://unpkg.com/[email protected]/textcolor.js" ></script>

用法

import TEXTColor from 'textcolor-js'

let hex = '#000000';        // or '#666' or 'rgb(12,34,56)'
let textcolor = TEXTColor.findTextColor(hex);
console.log(textcolor)      // #ffffff

参考example目录下的demo.html

引入TEXTColor.js后，可以根据TEXTColor.colorRgb方法，传入十六进制色值hex(如：#555、#123456)或者rgb(12,34,56)使用，返回相应的文字色值textcolor

为了方便更直观的察觉背景色变化对文字的影响，我在demo.html内引入了颜色选择器colorpicker.js。可以下载该案例查看背景色的改变对文字改变的影响。

JavaScript:

var textDom = document.getElementById('color-text');
var obj = document.getElementById("picker");
var a = Colorpicker.create({
    el: "color-picker",
    color: "#0081ff",
    change: function (elem, hex) {
        >textDom.style.color = TEXTColor.findTextColor(hex);
        elem.style.backgroundColor = hex;
    }
})

HTML:

<div class="container">
    <h2>点击下方选择颜色</h2>
    <div class="picker" id="color-picker">
        <div id="color-text">文字颜色</div>
    </div>
</div>