如何根據背景顏色動態修改文字顏色

效果

先看下效果圖

需求

我司有個需求，用戶能夠自定義主題色。但當我使用選色器選擇不一樣顏色的時候，發現了一個問題。若是用戶選擇黑色爲主題色，而後字體顏色也是黑色的，那他不就看不到字體了嗎。

思考

突發奇想

思考問題，如何判斷背景色何時使用黑色仍是白色的字體時，ps裏面有個方法去色提醒了我。

去色：把RGB三通道的色彩信息設置成同樣；即：R=G=B，那麼圖像就變成了灰色，而且，爲了保證圖像亮度不變，同一個通道中的R、G、B相加應爲1。即：R+G+B=1；如：0.213+0.715+0.072＝1； 此時RGB=0.213, 0.715, 0.072；

（0.213、0.715、0.072三個數字是如何來的，感興趣的同窗能夠去了解一下Color FAQ和顏色矩陣）

爲何必定要是灰色？

色彩分爲兩大類：有彩色系與無彩色系，有彩色系與無彩色系。

最大的區別在於，有彩色繫有色彩三屬性及色相、飽和度、明度。

無彩色系不會受到色相、飽和度的干擾。（黑白灰均屬於無彩色系）

參考灰度與色彩

這樣作有什麼意義呢？

咱們能夠經過計算背景顏色的色值與正常灰色的色值進行對比。

若是背景顏色比正常灰色色值要大的話，說明背景顏色是偏黑的，此時使用白色的字體。

若是背景顏色比正常灰色色值要小的話，說明背景顏色是偏白的，此時使用黑色字體。

開始實踐

思路理清了，看下可否實現

咱們先選擇好一個rgb色值，改成數組：

const rgbArr = [15, 35, 64];
複製代碼

因爲灰色的色值是(128, 128, 128),經過判斷灰色色值255/2識別rgb相對的大小

/**
 * 轉換字體顏色
 * 
 * @param {array} rgbArr rgb數組
 */
function resBgColor(rgbArr) {
    // 當color值大於128時,color值偏向255,即#ffffff,此時字體顏色應爲#000000
    // 當color值小於128時,color值偏向0,即#000000,此時字體顏色應爲#ffffff
    var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
    return color? '#000000': '#ffffff'
}
複製代碼

使用

var textColor = resBgColor(rgbArr);
console.log(textColor)      // #ffffff
複製代碼

成功了，居然如此簡單就完成了。那麼要作成上面gif的效果要怎樣實現呢?

進階

通常咱們會使用rgb(12,34,56)或者是#123456形式來進行顏色配置,爲了方便咱們使用函數resBgcolor,那麼咱們須要新編譯一個函數findTextColor轉爲rgbArr的數組

rgbArr = [15, 35, 64];
複製代碼

下面方法是統一返回rgb數組後而且執行字體匹配resBgcolor(colorValue)的最終代碼

function findTextColor(colorValue) {
    // #123456或者rgb(12,34,56)轉爲rgb數組[12,34,56]
    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var that = colorValue;
    if (/^(rgb|RGB)/.test(that)) {
        // 處理rgb轉爲數組
        var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
        return resBgColor(aColor);
    } else if (reg.test(that)) {
        // 處理十六進制色值
        var sColor = colorValue.toLowerCase();
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //處理六位的顏色值
        var sColorChange = [];
        for (var i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return resBgColor(sColorChange);
        } else {
            return false;
        }
    } else {
        return false;
    }
}
複製代碼

再次使用

// 用法一:
var textColor = findTextColor('#000');
console.log(textColor);     // #ffffff

// 用法二:
var textColor2 = findTextColor('rgb(255, 255, 255)');
console.log(textColor2);    // #000000
複製代碼

更酷炫的玩法

我在html頁面引入一個顏色選擇器，而後經過選擇器返回的值來給個人文字顏色賦值。

下面放主要代碼

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.colorRgb(hex);
        elem.style.backgroundColor = hex;
    }
})
複製代碼

HTML：

<div class="container">
    <h2>點擊下方選擇顏色</h2>
    <div class="picker" id="color-picker">
        <div id="color-text">文字顏色</div>
    </div>
</div>
複製代碼

具體的demo已經上傳到了github，你也能夠在github上下載個人demo玩耍（歡迎⭐）。

爲你所用

我已經將該函數封裝併發布到npm上面，你能夠經過npm install安裝或者直接引用

安裝方法

方法一：經過npm引入

npm install textcolor --save
複製代碼

方法二：經過<script>引入

<script type="type/javascript" src="https://unpkg.com/textcolor@1.0.2/textcolor.js" ></script>
複製代碼

用法

如何使用TEXTColor

import TEXTColor from 'textcolor'

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

結語

若是本文對你有任何幫助的話，感謝點個贊支持一下做者😄