css - Color equality in javascript - Stack Overflow

admin管理员组

文章数量:1023230

Is there a way to check if two strings representing colors are equal, whether they are hex, rgb, rgba, or in word form.

For example, these would be equal

"red" and "#ff0000"
"red" and "#f00"
"red" and "rgb(255, 0, 0)"
"#ff0000" and "rgba(255, 0, 0, 255)"

What I'm trying to do is join two or more elements together if their colors are the same, but sometimes the colors are represented differently.

I was checking the string equality of element.style.color, but then I ran into this problem. Would I be better off with a different approach?

A side question, and just out of curiosity, is does one browsers "dark blue" rgb value equal another browsers "dark blue" rgb value, for all colors?

Is there a way to check if two strings representing colors are equal, whether they are hex, rgb, rgba, or in word form.

For example, these would be equal

"red" and "#ff0000"
"red" and "#f00"
"red" and "rgb(255, 0, 0)"
"#ff0000" and "rgba(255, 0, 0, 255)"

What I'm trying to do is join two or more elements together if their colors are the same, but sometimes the colors are represented differently.

I was checking the string equality of element.style.color, but then I ran into this problem. Would I be better off with a different approach?

A side question, and just out of curiosity, is does one browsers "dark blue" rgb value equal another browsers "dark blue" rgb value, for all colors?

• javascript
• css
• colors

Share Improve this question Follow asked Jul 24, 2015 at 4:15 P0rterP0rter 10888 bronze badges 2

• 2 If you call .css() with jQuery you can get the rgb(r,g,b) value back out of it. – vp_arth Commented Jul 24, 2015 at 4:29
• You also can use getComputedStyle(el).backgroundColor :) – vp_arth Commented Jul 24, 2015 at 4:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

window.getComputedStyle(el).backgroundColor returns a color in rgb(r, g, b) format.

You can also use jQuery.css() for get it.

About color aliases: There are lot of cross-browser safe colors, but you may be can't rely to it, I'm not sure about IE :)

You can use Tiny color

https://bgrins.github.io/TinyColor/

https://bgrins.github.io/TinyColor/tinycolor.js

you just need to pass the color name and it will return the color name in hex, rgb etc.

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

and there are other similar methods

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

once you got all format, Then you can pare using string equality. Please check the demo given it above link.

There is one method also which pare colors

tinycolor.equals(color1, color2) 

Is there a way to check if two strings representing colors are equal, whether they are hex, rgb, rgba, or in word form.

For example, these would be equal

"red" and "#ff0000"
"red" and "#f00"
"red" and "rgb(255, 0, 0)"
"#ff0000" and "rgba(255, 0, 0, 255)"

What I'm trying to do is join two or more elements together if their colors are the same, but sometimes the colors are represented differently.

I was checking the string equality of element.style.color, but then I ran into this problem. Would I be better off with a different approach?

A side question, and just out of curiosity, is does one browsers "dark blue" rgb value equal another browsers "dark blue" rgb value, for all colors?

Is there a way to check if two strings representing colors are equal, whether they are hex, rgb, rgba, or in word form.

For example, these would be equal

"red" and "#ff0000"
"red" and "#f00"
"red" and "rgb(255, 0, 0)"
"#ff0000" and "rgba(255, 0, 0, 255)"

What I'm trying to do is join two or more elements together if their colors are the same, but sometimes the colors are represented differently.

I was checking the string equality of element.style.color, but then I ran into this problem. Would I be better off with a different approach?

A side question, and just out of curiosity, is does one browsers "dark blue" rgb value equal another browsers "dark blue" rgb value, for all colors?

• javascript
• css
• colors

Share Improve this question Follow asked Jul 24, 2015 at 4:15 P0rterP0rter 10888 bronze badges 2

• 2 If you call .css() with jQuery you can get the rgb(r,g,b) value back out of it. – vp_arth Commented Jul 24, 2015 at 4:29
• You also can use getComputedStyle(el).backgroundColor :) – vp_arth Commented Jul 24, 2015 at 4:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

window.getComputedStyle(el).backgroundColor returns a color in rgb(r, g, b) format.

You can also use jQuery.css() for get it.

About color aliases: There are lot of cross-browser safe colors, but you may be can't rely to it, I'm not sure about IE :)

You can use Tiny color

https://bgrins.github.io/TinyColor/

https://bgrins.github.io/TinyColor/tinycolor.js

you just need to pass the color name and it will return the color name in hex, rgb etc.

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

and there are other similar methods

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

once you got all format, Then you can pare using string equality. Please check the demo given it above link.

There is one method also which pare colors

tinycolor.equals(color1, color2) 

本文标签： cssColor equality in javascriptStack Overflow