Question

有没有办法检查代表颜色的两个字符串是否相等，无论它们是十六进制，rgb，rgba还是单词形式。

例如，这些将是相等的

“red”和“＃ff0000”
“红色”和“＃f00”
“红色”和“rgb（255,0,0）”
“＃ff0000”和“rgba（255,0,0,255）”

我想要做的是将两个或多个元素连接在一起，如果它们的颜色相同，但有时颜色的表示方式不同。

我正在检查element.style.color的字符串相等性，但后来遇到了这个问题。用不同的方法我会好些吗？

一个侧面的问题，只是出于好奇，一个浏览器的“深蓝色”rgb值是否等于所有颜色的另一个浏览器“深蓝色”rgb值？

Answer 1

您可以使用微小颜色

你只需要传递颜色名称，它将返回十六进制，rgb等颜色名称。

var tiny = tinycolor(color);
var hexString=  tiny.toHexString();
var hex8String=  tiny. tiny.toHex8String();

还有其他类似的方法

tiny.toRgbString()
tiny.toHslString()
tiny.toHsvString()
tiny.toName()
tiny.getFormat()

一旦获得所有格式，那么您可以使用字符串相等进行比较。请查看上面给出的演示链接。

还有一种比较颜色的方法

tinycolor.equals(color1, color2)

Answer 2

window.getComputedStyle(el).backgroundColor返回rgb(r, g, b)格式的颜色。

您也可以使用jQuery.css()获取它。

关于颜色别名：有很多cross-browser safe colors，但您可能无法依赖它，我对IE不确定：）