时间戳

首页 > 解决方案 > 检查渐变是否太轻javascript

javascript - 检查渐变是否太轻javascript

问题描述

我正在尝试为每个页面的每个元素添加渐变，现在，我已经实现了它，但我遇到了问题。

如果渐变太亮，我的文字不可见，有没有办法检查渐变颜色是否太亮，然后将文字更改为黑色？

这是我的代码

这是渐变元素 = https://github.com/ghosh/uiGradients/blob/master/gradients.json

const cards = document.querySelectorAll('.card');
    cards.forEach((card)=>{
            let i = Math.floor(Math.random() * gradients.length);
            const color = gradients[i].colors;
            color.forEach((color)=> {
                let finalGradient = `background: linear-gradient(to right, ${color}, ${color}, ${color}) !important;`;
                card.style.cssText = finalGradient;
            })
        })

标签： javascript

解决方案

这是我用来检测颜色是浅色还是深色的函数。您可以使用它并适应您的代码：

function isLightOrDark(color) {

    // Variables for red, green, blue values
    var r, g, b, hsp;

    // Check the format of the color, HEX or RGB?
    if (color.match(/^rgb/)) {

        // If HEX --> store the red, green, blue values in separate variables
        color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);

        r = color[1];
        g = color[2];
        b = color[3];
    } 
    else {

        // If RGB --> Convert it to HEX: http://gist.github.com/983661
        color = +("0x" + color.slice(1).replace( 
        color.length < 5 && /./g, '$&$&'));

        r = color >> 16;
        g = color >> 8 & 255;
        b = color & 255;
    }

    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
    hsp = Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
    );

    // Using the HSP value, determine whether the color is light or dark
    if (hsp>127.5) {

        return 'light';
    } 
    else {

        return 'dark';
    }
}

推荐阅读