如何比较jQuery/JavaScript中的两个颜色值？

我使用jQuery和

.css（'color'）

获得颜色值，然后我知道它应该是什么颜色

如何将从jQuery获得的颜色值与例如黑色颜色值进行比较？

关于

if ($('#element').css('color') == 'rgb(0, 0, 0)')
{
    // do something
}

用要比较的颜色值的红色、绿色和蓝色值替换0、0、0

---

以下是一种适用于使用JQuery的所有浏览器的方法：

在HTML页面上创建一个隐藏的div

。（使用JQuery动态创建虚拟元素不适用于命名颜色）

将虚拟元素的颜色设置为所需的颜色，即

$（'#dummy'）.css（'color'，'black'）

将虚拟元素的颜色与要检查的元素进行比较

i、 e

---

我有一个类似的问题，我必须切换一个元素的bgnd颜色。我是这样解决的：

var color_one = "#FFA500";
var color_two = "#FFFF00";

function toggle_color(elem){
    var bgcolor = elem.css("background-color");
    elem.css("background-color", color_one);     // try new color
    if(bgcolor == elem.css("background-color"))  // check if color changed
        elem.css("background-color", color_two); // if here means our color was color_one
}

var sameColor = colorValues(color1).join(',') === colorValues(color2).join(',');

---

这是我对Mike答案的实现，在一个函数中

function compareColors(left, right) {
    // Create a dummy element to assign colors to.
    var dummy = $('<div/>');

    // Set the color to the left color value, and read it back.
    $(dummy).css('color', left);
    var adjustedLeft = $(dummy).css('color');

    // Set the color to the right color value, and read it back.
    $(dummy).css('color', right);
    var adjustedRight = $(dummy).css('color');

    // Both colors are now adjusted to use the browser's internal format,
    // so we can compare them directly.
    return adjustedLeft == adjustedRight;
}

功能比较色（左、右）{
//创建要为其指定颜色的虚拟元素。
虚拟变量=$（''）；
//将颜色设置为“左颜色”值，然后将其读回。
$（虚拟）.css（'color'，左）；
var adjustedLeft=$（虚拟）.css（'color'）；
//将颜色设置为正确的颜色值，然后将其读回。
$（虚拟）.css（'color'，右）；
var adjustedRight=$（虚拟）.css（'color'）；
//这两种颜色现在都调整为使用浏览器的内部格式，
//所以我们可以直接比较。
返回调整左==调整右；
}

---

您不需要实际地将元素添加到DOM中，这样就可以工作了。在IE8、IE10、FF、Chrome、Safari中进行测试。

事实上，我尝试了Charlie Kilian的答案。由于某些原因，当您尝试使用和“rgb（0,0,0）”值设置

.css（'color'）

时，它不起作用

我不知道为什么。在控制台中工作得很好。可能是因为我的比较函数在一个javascript对象中，它是某种上下文问题或引用问题。不管是哪种方式，我最终还是感到沮丧，并编写了自己的函数，该函数将比较两种颜色，而不管格式如何，并且不会创建任何元素或依赖jQuery。该函数采用十六进制和RGB值

它可能会被优化，但我现在真的没有时间。希望这有助于人们理解纯javascript

var compareColors= function (left, right) {
       var l= parseColor(left);
        var r=parseColor(right);
        if(l !=null && r!=null){
           return l.r == r.r && l.g == r.g && l.b == r.b;
        }else{
            return false;
        }
        function parseColor(color){
           if(color.length==6 || color.length==7){
                //hex color
               return {
                    r:hexToR(color),
                    g:hexToG(color),
                    b:hexToB(color)
                }
            }else if(color.toLowerCase().indexOf('rgb')>-1){
              var arr
                var re = /\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*/gmi;
                var m;

                if ((m = re.exec(color)) !== null) {
                    if (m.index === re.lastIndex) {
                        re.lastIndex++;
                    }
                    // View your result using the m-variable.
                    // eg m[0] etc.
                    arr = m[0].split(',');
                    return {
                        r: parseInt(arr[0].trim()),
                        g: parseInt(arr[1].trim()),
                        b: parseInt(arr[2].trim())
                    }
                }else{
                  return null;
                }

            } else{
                return null;
            }
            function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
            function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
            function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
            function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
        }
    }

以下是我从

---

CSS颜色可以以多种格式出现—

rgb

，

rgba

，

十六进制

，几乎不受支持的

#hexalpha

，声名狼藉的命名颜色，以及特殊的

透明

。 要将任何颜色与任何颜色进行比较，首先需要对它们进行规格化。

colorValues

函数已找到或将始终为您提供

[r，g，b，a]

数值数组。
然后你可以这样比较它们：

var color_one = "#FFA500";
var color_two = "#FFFF00";

function toggle_color(elem){
    var bgcolor = elem.css("background-color");
    elem.css("background-color", color_one);     // try new color
    if(bgcolor == elem.css("background-color"))  // check if color changed
        elem.css("background-color", color_two); // if here means our color was color_one
}

var sameColor = colorValues(color1).join(',') === colorValues(color2).join(',');

颜色值函数

// return array of [r,g,b,a] from any valid color. if failed returns undefined
function colorValues(color)
{
    if (color === '')
        return;
    if (color.toLowerCase() === 'transparent')
        return [0, 0, 0, 0];
    if (color[0] === '#')
    {
        if (color.length < 7)
        {
            // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
            color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
        }
        return [parseInt(color.substr(1, 2), 16),
            parseInt(color.substr(3, 2), 16),
            parseInt(color.substr(5, 2), 16),
            color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1];
    }
    if (color.indexOf('rgb') === -1)
    {
        // convert named colors
        var temp_elem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
        var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
        temp_elem.style.color = flag;
        if (temp_elem.style.color !== flag)
            return; // color set failed - some monstrous css rule is probably taking over the color of our object
        temp_elem.style.color = color;
        if (temp_elem.style.color === flag || temp_elem.style.color === '')
            return; // color parse failed
        color = getComputedStyle(temp_elem).color;
        document.body.removeChild(temp_elem);
    }
    if (color.indexOf('rgb') === 0)
    {
        if (color.indexOf('rgba') === -1)
            color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
        return color.match(/[\.\d]+/g).map(function (a)
        {
            return +a
        });
    }
}

//从任何有效颜色返回[r，g，b，a]的数组。如果失败，返回未定义
函数颜色值（颜色）
{
如果（颜色=“”）
返回；
if（color.toLowerCase（）==“透明”）
返回[0,0,0,0]；
如果（颜色[0]=='#'）
{
如果（颜色长度<7）
{
//将#RGB和#RGBA转换为#RRGGBB和#RRGGBBAA
颜色=“#”+颜色[1]+颜色[1]+颜色[2]+颜色[3]+颜色[3]+（color.length>4？颜色[4]+颜色[4]：”）；
}
返回[parseInt（color.substr（1,2,16）），
parseInt（color.substr（3，2），16），
parseInt（color.substr（5，2），16），
color.length>7？parseInt（color.substr（7,2），16）/255:1]；
}
if（color.indexOf（'rgb'）=-1）
{
//转换命名颜色
var temp_elem=document.body.appendChild（document.createElement（'fictum'））；//故意使用未知标记以降低css规则重写的可能性！重要信息
var flag='rgb（1,2,3）'；//此标志在chrome 59、ff 53、ie9、ie10、ie11、edge 14上测试
temp_elem.style.color=标志；
if（temp_elem.style.color！==标志）
return；//颜色集失败-某些可怕的css规则可能正在接管对象的颜色
temp_elem.style.color=颜色；
if（temp|elem.style.color===标志| | temp|elem.style.color===''）
return；//颜色解析失败
颜色=getComputedStyle（临时元素）。颜色；
文件.正文.删除文件（临时文件）；
}
if（color.indexOf（'rgb'）==0）
{
if（color.indexOf（'rgba'）=-1）
color+='，1'；//将“rgb（R，G，B）”转换为“rgb（R，G，B）A”，这看起来很糟糕，但会通过下面的regxep
返回color.match（/[\.\d]+/g）.map（函数（a）
{
返回+a
});
}
}

您想比较什么？亮度、色调、饱和度？你的目标是什么？我需要知道文本字段是否有真实数据。因为现在它的标签颜色与用户实际输入的不同…请注意，这并不总是适用于Internet Explorer，因为它返回原始值。因此，它可以是从3或6位十六进制值到命名颜色的任何值。是的，我不确定这一点，但我认为jQuery抽象出了浏览器之间的差异？难道没有更多独立于实现的解决方案吗？即使RGB值之间的空格稍有改变也会破坏这种平等性，更不用说十六进制表示，甚至是简单的单词表示，如白色或黑色。有人有主意吗？这应该是正确的答案。这是唯一能让你确信像#c0cc00和RGB（192204,0）这样的东西会比较的方法。我认为这也不可靠。在最新的Chrome中，我的虚拟div返回“白色”，但我将它与返回的“rgb（255255）”元素进行了比较，您使用的是哪种操作系统？你有你所做的示例代码吗？一些浏览器会以你给他们的格式返回给你。（这些天不多，但是…）5-6个小时后，我很高兴我找到了这个。你不会的