66

I'm teaching a jr. high/high school web programming class, and we're starting with simple elements and attributes like font and color before moving on to CSS. I know color is deprecated and font is not included in HTML5, but for teaching purposes, I find it convenient to start with simple HTML tags and work our way up to CSS. The students get a lot of joy out of being able to change colors on a page during the first week of class. (I also teach them marquee and blink in week 1, but inform them that if they ever use them again, they will lose points).

One of the students started submitting homework with odd things in the color attribute values, like "Skittles" or "Spiderman". I started experimenting with this and discovered that just about anything you put into the color="" attribute on the font tag produces some sort of color. And it appears that the color is consistent across the latest versions of IE, Firefox, Chrome, Opera, and Safari.

I have discovered that putting "LuckyCharms" in as a CSS color DOES NOT WORK. It only seems to work where colors are expected in HTML attributes, for example font color="LuckyCharms", or body bgcolor="LuckyCharms".

I'm trying to explain to my class why this happens, and so far I haven't been able to make sense of it, or to Google a good answer. It would appear that it's being interpreted as a color code, but I can't make sense of how.

UPDATE: After some trial and error, I have determined a 5-step algorithm (using the link provided) to convert pretty much any string into the corresponding hex color. I will provide the algorithm here for the edification of future visitors:

  1. Change each non-hex character to a 0.
  2. Add 0's to the string until its length is a multiple of 3.
  3. Divide string into 3 equal parts.
  4. While the length of the sub-strings is greater than 2, and all three of the sub-strings begin with a 0, remove the leading 0s from each string.
  5. If the length of the sub-strings is still greater than 2, then truncate each substring to 2 characters.

That's it, put the substrings together and you've got your hex color code. I have verified this algorithm with about 20 different samples and compared the results using the Firefox ColorZilla add-on color picker.

Note that in this case, the rules ARE indeed specifically stated in the link specified in one of the answers and will be adhered to by all browsers. So it is something you can count on to work in any browser (should you really want to use funny color names).

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Jeremy Goodell
  • 18,225
  • 5
  • 35
  • 52
  • 4
    Instead of teaching them how it looks, teach them what it **means**. Trust me, worked very well with my brother when I taught him that. Teach them good HTML, what `

    ` means, and what `` means. Then move forward to styling. Also, don't forget to mention that `` and `` are deprecated, and should not be used on an actual site, and are only for demonstrational purposes. Now I can read your question. :)

     – Madara's Ghost Oct 17 '12 at 16:50
  • Proposals to close a question, or closing a question, are not meant to say that the question was bad. Just that it’s about something that is already covered, and time would be better spent in improving the answers to the existing question than starting from scratch in answering a duplicate. Being a duplicate means that it’s about something that has interested people earlier, and has been answered; so the question is relevant, just a duplicate. – Jukka K. Korpela Oct 17 '12 at 16:58
  • @Madara Uchiha: Honestly, very few web design students will care enough about semantic markup. I know; I've known HTML for more than half of my life, had to go through HTML/CSS 101 in my course a couple years ago, and I saw font tags *everywhere*... except in my own work :( But to be fair, my lecturers weren't very competent either. – BoltClock Oct 17 '12 at 17:00
  • I'm happy to see it closed if it's a duplicate. Prior to posting this question, I used several different search terms to try to find a similar question, but the referenced question didn't show up in my searches. – Jeremy Goodell Oct 17 '12 at 17:22
  • @Madara Uchiha: Of course I teach them what everything means. I've got 17 students and about 5 of them get everything intuitively after hearing it once. Several of them have to work a little harder before they exhibit an understanding. The rest of them don't seem all that interested, but hey, they are high school students! – Jeremy Goodell Oct 17 '12 at 17:24
  • @BoltClock: The very first sentence they told me when we took the basic HTML course: "HTML is MSWord for pr0s". And true enough, before Word and the similars were invented, HTML was used to mark up documents. Whenever I teach anyone, I start with the semantics. I find it easier to explain further elements as needed, as well as making the CSS simpler later on. – Madara's Ghost Oct 17 '12 at 19:48
  • @JeremyGoodell: Back when I was tutoring (not a teacher, but still), I would simply kick out anyone I sensed that wasn't interested in the subject (I know you don't have the privilege). If you aren't interested, you won't listen. If you don't listen, you don't understand. If you don't understand... http://cdn.memegenerator.net/instances/400x/28525393.jpg. – Madara's Ghost Oct 17 '12 at 19:52
  • 7
    I created a "[random string to css color](http://codepen.io/TimPietrusky/pen/pxCct)" converter based on your 5 steps. What do you think? – TimPietrusky Mar 10 '13 at 19:31
  • 1
    @TimPietrusky FANTASTIC! (took me a few minutes to figure out how to work it though) – Jeremy Goodell Mar 11 '13 at 15:27
  • 1
    @JeremyGoodell thanks dude! What took you so long? Is the UI that bad? I created a standalone version: [randomstringtocsscolor.com](http://randomstringtocsscolor.com/) and linked your question as the src. – TimPietrusky Mar 11 '13 at 16:42
  • @TimPietrusky Sorry I sometimes go days (even weeks?) without logging into stackoverflow. I know, what a slacker. Oh, and BTW, I pointed all my students at your page. Not sure they will care much, but at least they know. – Jeremy Goodell Mar 14 '13 at 00:42

4 Answers4

33

The HTML 5 specification includes the rules for parsing legacy colours.

They are rather long, and are designed to allow browsers to be consistent about how they handle broken code.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • And none of these rules apply to CSS. CSS has its own set of rules for interpreting color values, which are pretty strict. ([CSS21](http://www.w3.org/TR/CSS21/syndata.html#color-units) and [css-color-3](http://www.w3.org/TR/css3-color/#colorunits)) – BoltClock Oct 17 '12 at 16:56
  • Ok, I think this works. I followed the instructions for legacy colors and converted "LuckyCharms" first into "LuckyCharms0" to make the length a multiple of 3, then converted it into three equal size strings: "Luck" "yCha" and "rms0", then I truncated each string like so: "Lu", "yC" and "rm". Then I got stumped for a minute, but ended up eventually converting "Lu" to "00", "yC" to "C0", and "rm" to "00". Sure enough, "00C000" appears to be the same color as "LuckyCharms". I'm not sure the class will find this exercise as interesting as I did ... – Jeremy Goodell Oct 17 '12 at 17:14
  • Rats. I am now using the Firefox Colorzilla addon to see what the colors really are. LuckyCharms is actually #0CC000 so my interpretation of the parsing rules is not quite right. – Jeremy Goodell Oct 17 '12 at 18:02
  • Ok, I see, I did not interpret instruction 10 correctly. LuckyCharms is indeed #0CC000 by the following rules: (1) Convert all non hex chars to 0's: 00c00C0a000; (2) Add 0s to make length a multiple of 3: 00c00C0a0000; (3) Split into 3 equal length strings: 00c0 0C0a 0000; (4) Remove leading zeroes from each string while all strings are longer than 2, and all strings still start with 0: 0c0 C0a 000; (5) truncate all strings to 2 characters: 0C C0 00. Now I can sleep tonight. – Jeremy Goodell Oct 17 '12 at 18:09
  • 1
    I posted the 5-step algorithm as an UPDATE in the question above. – Jeremy Goodell Oct 17 '12 at 18:51
5

Very interesting. Seems as though the browser will interpret any character it can (a-f) and leave the rest to be 0's if it can't match. For instance:

Spiderman
 00DE0 A

Still needs more experimenting though.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 1
    Spiderman first gets converted to 000de00a0 (replacing all non-hex chars with 0s), which is fine because the length is 9 (a multiple of 3), then to 000 de0 0a0, which is fine since at least one of the strings starts with something other than 0, and then truncate to 00 DE 0A, just like you said. It's essentially a 5-step algorithm. – Jeremy Goodell Oct 17 '12 at 18:40
  • 1
    Am I missing something, or person with 61.5k rep wrote an answer, that is not an answer at all, that is a comment in fact and that violates everything, we know (or should know) about writing good, _quality_ answers? – trejder Oct 16 '14 at 12:04
  • 4
    @trejder Yes, you're missing the fact that this answer was written (almost exactly) 2 years ago, when I didn't have 61.5k. – Madara's Ghost Oct 16 '14 at 13:27
3

This is an intriguing question.

Through brief experimentation, I've found that "Luck" produces the same color (to my eyes, anyway) as "LuckyCharms" but "LuckBeALady" gets you a darker shade, while "LuckBeALadyTonight" is bluer.

BTW, my first thought was that it was acting on the recognizable hex characters, but that turns "LuckyCharms" into cca, which rendered black. Combinations of 0's and the hex chars, as Madara Uchiba suggests, failed to render the same grass green as "LuckyCharms"

Don't have an answer tho.

ganncamp
  • 31
  • 1
  • I thought the same thing myself about the hex codes, but discovered it didn't fly. – Jeremy Goodell Oct 17 '12 at 17:02
  • According to the rules specified in the link posted by @Quentin, "LuckyCharms" = "Luck yCha rms0" = "Lu yC rm" = #00C000, "Luck" = "Luck00" = "#00C000, LuckBeALady = "Luck BeAL ady0" = "Lu Be ad" = "#00BEAD", and LuckBeALadyTonight = "LuckBe ALadyT onight = "Lu AL on" = #00A000. My testing shows that indeed, these values produce exactly the same colors. – Jeremy Goodell Oct 17 '12 at 17:31
  • hmmm, not quite right, it doesn't seem to work for "adamlevine" which according to my parsing should be "adam levi ne00" or "#ADE0E0", but it's not. – Jeremy Goodell Oct 17 '12 at 17:47
2

The basic answer for what is expected to happen is "it depends on the browser". One of the problems with previous versions of HTML before 5 is that it is unspecified what happens when non-standard HTML is encountered by the browser. The interpretation from @Madara Uchiha is one example of how a browser might interpret the color specification, but it's just as allowable, standards-wise, for the browser to crash or to eject the CD tray or to change the resolution of your monitor to 400x300 px. Of course, this is not ideal - so what you're seeing is one programmer's idea, at one time, as to what should happen if a non-standard HTML color specification is encountered.

The reason it doesn't happen with CSS is that it's a different parser interpreting the color. This same parser interprets the color whether it's inline CSS or in a linked-in CSS document. CSS does define what happens to an improper value when it is encountered: it is ignored, and does not affect the document at all.

I would say this is a good time to talk to the class about standards compliance, as this is a critical field of understanding for students - and some professionals I have the misfortune to know. When they say, "But color Skittles works just fine", you can tell them that it works fine when they look at it, but it's entirely possible that it would crash their instructors' browser, earning them a big fat F. That's as close to a real-world scenario as you can get, when some of us have to give up our weekends because at demo time somebody else's crappy code doesn't work correctly.

I ain't bitter though. Mostly :)

Matt
  • 10,434
  • 1
  • 36
  • 45
  • To my way of thinking, if something works the same in IE, Firefox, Chrome, Opera and Safari, it's pretty safe. But I am constantly reinforcing the notion that just because it works, doesn't mean it's correct. And that if you make a mistake in your HTML, it probably won't work in Internet Explorer 6, which some of your visitors are sure to be using. I always take points off for incorrect HTML even if the result is correct. – Jeremy Goodell Oct 17 '12 at 17:19