JavaScript中的颜色相等性

Question

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

举个例子，以下内容将是相等的： "red" 和 "#ff0000" "red" 和 "#f00" "red" 和 "rgb(255, 0, 0)" "#ff0000" 和 "rgba(255, 0, 0, 255)"

我的目标是合并两个或多个元素，如果它们的颜色相同，但有时颜色的表示方式不同。

我正在检查element.style.color的字符串相等性，但我遇到了这个问题。我应该采取其他方法吗？

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

- P0rter

---

如果你使用jQuery调用.css()方法，你可以从中获取rgb(r,g,b)的值。 - vp_arth

你也可以使用 getComputedStyle(el).backgroundColor :) - vp_arth

Answer 1

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

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

关于颜色别名：有很多跨浏览器安全颜色，但是您可能不能依赖它，我不确定IE是否支持 :)

- vp_arth

---

这应该是被接受的答案。拥有一个不需要拉入全新库的选项总是更好的。 - Andrew Toups

Answer 2

您可以使用Tiny Color。只需传递颜色名称，它就会返回十六进制、RGB等颜色名称。您可以访问以下链接进行查看：https://bgrins.github.io/TinyColor/，或者下载 https://bgrins.github.io/TinyColor/tinycolor.js。

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) 

- Thakur