Why does rgb(0,0,0) show red in some browsers?

Question

Why does the following html snippet:

<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  Some Text<br />
  <font color="rgb(0,0,0)">More Text</font><br />
  <span style="color: rgb(255, 0, 0);">
   <font color="rgb(0,0,0)">And the last of the text!</font>
  </span>
 </body>
</html>

Result in the output in the picture at the link (notice the red colouring!):

Link to screenshot

This seems to happen in Chrome and Firefox and even in Outlook (in HTML emails) but the text shows as black in IE 11.

It's not necessarily something I need to or can fix but that sort of styling is something given by a third party component and it's led me to wonder why this gives the result it does. I can't find any suggestions anywhere on the web on why this would be red(ish) rather than black.

I want to understand it more than anything.

You're mixing style properties and color, which takes presedence obviously alters per browser. Basically don't use `color=""` CSS should style a HTML element. — Liam, Mar 20 '17 at 17:07
The `font` tag was deprecated at least a decade ago, wasn't it?! Similarly the `color` attribute? — T.J. Crowder, Mar 20 '17 at 17:07
The `color` HTML attribute has nothing to do with CSS, thus it doesn't accept CSS syntax. It's just a remnant of the early pre-CSS word wide web. I'm surprised `rgb()` even works in some browsers (assuming it actually does...) — Álvaro González, Mar 20 '17 at 17:10
Wonder if it's related to [Why does HTML think “chucknorris” is a color?](http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color?rq=1) — j08691, Mar 20 '17 at 17:11

score 8 · Accepted Answer · edited May 23 '17 at 12:25

8

The HTML color attribute (which was superseded over two decades ago) doesn't accept CSS color values. It only accepts HTML color values.

rgb(0,0,0) is a CSS color value. It is not an HTML color value.

Error recovery will cause it to either be ignored (in which case the parent element's colour will be inherited) or treated as a different colour.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 20 '17 at 17:08

Quentin

914,110
126
1,211
1,335

2

Relevant spec links for HTML 4 if you want to include: https://www.w3.org/TR/html4/present/graphics.html#edef-FONT and https://www.w3.org/TR/html4/types.html#type-color – Chris Mar 20 '17 at 17:10
@Chris: Ha! 18 years. :-) – T.J. Crowder Mar 20 '17 at 17:10
At least... It was also deprecated in the 4.0 spec dated April '98... I'm intrigued and will keep looking. ;-) – Chris Mar 20 '17 at 17:13
1

It was superseded when CSS 1 came out in 1996. – Quentin Mar 20 '17 at 17:14
The spec for the tag does allow for the syntax rgb(x, x, x). However, newer browsers don't fully support the tag, and are probably buggy. Due to this tag being deprecated so long ago. EDIT: oops, this is wrong. Thanks a lot w3schools. – Anish Goyal Mar 20 '17 at 17:15
@AnishGoyal — Really? Which spec? "A color value may either be a hexadecimal number (prefixed by a hash mark) or one of the following sixteen color names." doesn't support that assertion. – Quentin Mar 20 '17 at 17:16
@AnishGoyal: Have you got a link for that claim? The spec links I quoted above do not mention rgb syntax as valid (sorry, I'm a sucker for spec links) – Chris Mar 20 '17 at 17:16
@Chris: My mistake. I trusted W3schools. Never again. https://www.w3schools.com/tags/att_font_color.asp. – Anish Goyal Mar 20 '17 at 17:17
1

@AnishGoyal: Ah yes. I got there on my first google and was like "No. F you guys. I'm finding some real documentation." ;-) – Chris Mar 20 '17 at 17:18
Thanks for the great answer, and other answers from everyone else. Really useful to know and nice to know our third party component is so out of date! Great first experience of posting a question to SO! – Aaron Emerson Mar 20 '17 at 20:08

score 1 · Answer 2 · edited May 23 '17 at 12:25

Some browsers render <font color="rgb(0,0,0)"> in red because they interpret "rgb(0,0,0)" - which isn't a valid color value according to the deprecated spec - as hex color string #b00000:

<font color="rgb(0,0,0)">This color</font>
equals
<font color="#b00000">this color</font>

See Why does HTML think “chucknorris” is a color? for an explanation. Thanks to @j08691 for pointing this out in the comments above.

Why does rgb(0,0,0) show red in some browsers?

2 Answers2