How browser handles CSS color names in the source code

Question

Is there a way to override how javascript converts complex CSS color names to rgb values when applying them to DOM elements.

For example: document.getElementById("colorMe").style.background = "lightblue" will set the div.style object with a background = rgb(...).

However, document.getElementById("colorMe").style.background = "blue"will set the div.style object with a background = blue.

I would like to bypass how javascript is converting that color into an RGB value for complex color names. Is this possible?

If you wanted to do this, I would use something server-side to plug in the right values. — Brad
– Brad, Commented Feb 1, 2013 at 5:09
Why not just use the Chrome Inspector instead of "View Source?" — Matt Ball
– Matt Ball, Commented Feb 1, 2013 at 5:12
@ExplosionPills -- that is true, edited to remove the "view source" part. Basically I would like if I call var x = document.getElementById("colorMe").style.background I would like that to show up as "lightblue" not "rgb(....)" — Augie Gardner
– Augie Gardner, Commented Feb 1, 2013 at 5:36

Niet the Dark Absol · Accepted Answer · 2013-02-01 05:41:04Z

2

The normalised format for CSS colours is rgb(R,G,B) for opaque colours, and rgba(R,G,B,A) for semi-transparent ones. No matter what you give as input, it is converted to one of these formats as output, and there's nothing you can do to chnge that.

However, you can save the name elsewhere, like this:

elem.setAttribute("data-color",elem.style.color = "lightblue");

Then just get elem.getAttribute("data-color") and you have your lightblue input.

answered Feb 1, 2013 at 5:41

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Augie Gardner Over a year ago

In the chrome inspector I am allowed to specify a source of style = "background: lightblue;", so this code is valid. Is it javascript then, that is converting the value? And there is no way to overwrite that default conversion?

Niet the Dark Absol Over a year ago

It's not JavaScript, it's just how the browser works internally. For instance, you can type blah, but the browser will convert it to blah - you won't see this except when you retrieve the DOM, just like you don't see the colour format change until you retrieve it.

Augie Gardner Over a year ago

Unfortunately I believe I asked the question improperly. I don't believe this has to do with the browser, but how javascript converts colors in the div.style object. I can do div.style.background = "blue" and it will store it as "blue", but doing div.style.background = "lightblue" will store it as rgb(...), so that later, when I access that inside the javascript object, it does not return "lightblue". I'm looking to override THAT functionality. not the browsers.

Niet the Dark Absol Over a year ago

That's browser-specific, I'm afraid.

Augie Gardner Over a year ago

I've asked the moderators to remove this question since all these answers began with the wrong question phrasing and title. I've reposted with a proper title. If it's browser-specific, perhaps there is a javascript cross-browser solution? If you think you still have an answer to this I encourage you to post on the question I re-made: link

Danilo Kobold · Accepted Answer · 2013-02-01 05:46:13Z

0

There's a standard called webcolors...

http://en.wikipedia.org/wiki/Web_colors

When your browser reads lightblue it just translates it to 173 216 230.

answered Feb 1, 2013 at 5:46

Danilo Kobold

2,5811 gold badge22 silver badges31 bronze badges

2 Comments

Augie Gardner Over a year ago

I understand that, and when it reads red, javascript will not convert it to RGB, and instead will leave it as "red". Is there a way to make lightblue NOT be converted within the div.style object when being set via javascript?

Danilo Kobold Over a year ago

no, but if i understand what you are trying to do you can archive that with element.setAttribute('data-color', 'lightblue')... to keep track of that color thing...

Collectives™ on Stack Overflow

How browser handles CSS color names in the source code

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related