The color of your name (in css and html)

HTML & CSS
1

Triggered by Pullo’s [U]Plain Random: “chucknorris” question[/U] (“HTML thinks that ‘chucknorris’ is a colour!”) in the javascript forum, I made a test demo about the phenomenon that the use of <body bgcolor=“…”> can get an arbitrary value. Every word (or set of keystrokes) is converted by the browsers to a certain color.

Not only the body can get a background in this way: also some other elements, and the text color somewhere can get a color by a random word too. So there is more!
And a series of browser differences, of course.

  • You can test it and read the story over here: [U]The color of your name[/U]. :lympics:
    Explication of the magic is added,
    as well as some further test pages.

So if you wonder what is your personal color *), have a look! - But be careful: you can have a flashy color! :wink:

*) Sensei #PAULOB must have a black belt, I see. :find:

2

Wow Francky, that’s excellent!
I’m pleased to say that my colour (real name) was royal blue :slight_smile:

3

As an Arsenal huge supporter I’m proud to say that my colour is Arsenal red! : )

4

That’s a lot of research Francky. Well done? I can see you had fun working all that out:)

It’s interesting to see what hoops browsers try to jump through.

BruceLee comes out as a nice light blue.

5

Excellent work! My given name is kind of a maroon red, but with my nickname it’s a dark green. Guess I’ve got a Christmas-y kind of name! :slight_smile:

6

I tried this with a whole bunch of names using the formula instead of the poster’s test page, and I found that sometimes the leading 0 is not used. For example, when I code my name I get 0ea0b 0a000 0a00e which should give the colour #0e0a0a (a very dark grey) but the browser gives me #eaa0a0 (pink) because the first 0 was dropped. But another name coded was 0a000 c0d0b b0000 which gave #0ac0b0 (a turquoise colour) because the first 0 was not dropped. It seems very random. Does anyone know why this would be happening, or would like to figure out why because this is fun and they really don’t have anything they would rather do?

7

@moretea:
Beautiful, now you change your mood between red and green (and the blue is present too: “more tea” is almost the color “[U][COLOR=“#00FFFF”]aqua[/COLOR][/U]”). :slight_smile:

@WebMachine,
I can't reproduce your findings, for I don't know which words you started with.

But I tried the [[U]formula[/U]](http://scrappy-do.blogspot.de/2004/08/little-rant-about-microsoft-internet.html) of Sam Schinke 2 times: once with a pure name as "color name", and once with a trailing zero.

=======
[B]Color name = [FONT=Courier New][SIZE=3][COLOR="#B22222"]Francky[/COLOR][/SIZE][/FONT][/B]
[LIST=1]
[*][I]"First, remove any hash-marks, then replace any non-hexadecimal characters (0-9a-f) with 0's."[/I]
Then [FONT=Courier New][SIZE=2][COLOR="#B22222"]Francky[/COLOR][/SIZE][/FONT] &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]f0a0c00[/COLOR][/SIZE][/FONT].
[*][I]"For lengths 4 and longer, the field is right-padded with 0's to the next full multiple of 3. This step is important for longer fields."[/I]
Result &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]f0a0c0000[/COLOR][/SIZE][/FONT] (last 00 added).
[*][I]"Next, the string is broken into three even parts, representing red, green and blue, from left to right."[/I]
Result &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]RR/GG/BB = f0a 0c0 000[/COLOR][/SIZE][/FONT].
[*][I]"If the individual RGB values are over 8 characters long, they are truncated to 8 characters by removing characters from the left."[/I]
N/A, still &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]RR/GG/BB = f0a 0c0 000[/COLOR][/SIZE][/FONT].
[*][I]"Once the individual RGB values are under 8 characters long they are truncated by removing characters from the right."[/I]
Result &gt;  [FONT=Courier New][SIZE=2][COLOR="#B22222"]RR/GG/BB = f0 0c 00[/COLOR][/SIZE][/FONT].
[/LIST]
In Hex notation: #F00C00 = rgb(240,12,0) = almost red.
This is exactly the color appearing in the test page. (try "Francky" and "#F00C00" in the input field)

=======
[B]Color name = [FONT=Courier New][SIZE=3][COLOR="#B22222"]0Francky[/COLOR][/SIZE][/FONT][/B] (it's a zero, but in this case === uppercase O and === lowercase o ;))
[LIST=1]
[*][I]"First, remove any hash-marks, then replace any non-hexadecimal characters (0-9a-f) with 0's."[/I]
Then [FONT=Courier New][SIZE=2][COLOR="#B22222"]0Francky[/COLOR][/SIZE][/FONT] &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]0f0a0c00[/COLOR][/SIZE][/FONT].
[*][I]"For lengths 4 and longer, the field is right-padded with 0's to the next full multiple of 3. This step is important for longer fields."[/I]
Result &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]0f0a0c000[/COLOR][/SIZE][/FONT] (last 0 added).
[*][I]"Next, the string is broken into three even parts, representing red, green and blue, from left to right."[/I]
Result &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]RR/GG/BB = 0f0 a0c 000[/COLOR][/SIZE][/FONT].
[*][I]"If the individual RGB values are over 8 characters long, they are truncated to 8 characters by removing characters from the left."[/I]
N/A, still &gt; [FONT=Courier New][SIZE=2][COLOR="#B22222"]RR/GG/BB = 0f0 a0c 000[/COLOR][/SIZE][/FONT].
[*][I]"Once the individual RGB values are under 8 characters long they are truncated by removing characters from the right."[/I]
Result &gt;  [FONT=Courier New][SIZE=2][COLOR="#B22222"]RR/GG/BB = 0f a0 00[/COLOR][/SIZE][/FONT].
[/LIST]
In Hex notation: #0FA000 = rgb(15,160,0) = almost green.
This is exactly the color appearing in the test page. (try "0Francky" and "#0FA000" in the input field)

=======
In these cases the formula is doing as promised in both cases: no dropping zero.
[LIST]
[*]BTW, what is said when a dropping zero is falling on your toes? :shifty:
[/LIST]
=======
So my questions are:
[LIST]
[*]How did you get the "0ea0b 0a000 0a00e" ? ("when I code my name I get [FONT=Courier New][SIZE=2][COLOR="#B22222"]0ea0b 0a000 0a00e[/COLOR][/SIZE][/FONT]")
[*]And/or: do you have an example name to admire the dropping zero?
[/LIST]
8

My name is Jean Braithwaite so I used 0ea0b0a0000a00e which has 15 digits so I didn’t have to add any. I split the sequence of digits into three parts - 0ea0b 0a000 0a00e. Taking the first two digits of each group leaves me with the hex code 0e 0a 0a, but when I tested my name in bgcolor=“jeanbraithwaite” I got the hex code ea a0 a0 which is what you would get if the leading zero is dropped from the sequence.

When I did Samuel Clements (no-one I know :slight_smile: ) the sequence is 0a00e 0c0e0 e0000. I had to add the final 0 to make a multiple of three. Using the first two digits of each group the colour is 0a 0c e0, which is exactly what I got with bgcolor=“samuelclements”. The leading 0 was not dropped.
I tried it with four other names - sometimes the leading zero was dropped, sometimes the leading zero was not dropped.

9

Yes, I see. There must be some gap in the formula, between two steps must be another rule for dropping the starting-0 or not. :rolleyes:

  • Made also some other experiments: sometimes it is the length of the input (the adding of new 0’s in the end to get a 3-dividable number of characters), but not always (another name with the same amount of chars doesn’t do it).

Strange-strange-strange!
While I don’t have the brute force to get the explanation, I think we have to ask the browsers. :slight_smile: