SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)

    The color of your name (in css and html)

    Triggered by Pullo's Plain Random: "chucknorris" question ("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: The color of your name.
      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!

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Wow Francky, that's excellent!
    I'm pleased to say that my colour (real name) was royal blue

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Location
    London, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As an Arsenal huge supporter I'm proud to say that my colour is Arsenal red! : )

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #5
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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! :-)

  6. #6
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    @moretea:
    Beautiful, now you change your mood between red and green (and the blue is present too: "more tea" is almost the color "aqua").

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

    But I tried the formula of Sam Schinke 2 times: once with a pure name as "color name", and once with a trailing zero.

    =======
    Color name = Francky
    1. "First, remove any hash-marks, then replace any non-hexadecimal characters (0-9a-f) with 0's."
      Then Francky > f0a0c00.
    2. "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."
      Result > f0a0c0000 (last 00 added).
    3. "Next, the string is broken into three even parts, representing red, green and blue, from left to right."
      Result > RR/GG/BB = f0a 0c0 000.
    4. "If the individual RGB values are over 8 characters long, they are truncated to 8 characters by removing characters from the left."
      N/A, still > RR/GG/BB = f0a 0c0 000.
    5. "Once the individual RGB values are under 8 characters long they are truncated by removing characters from the right."
      Result > RR/GG/BB = f0 0c 00.

    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)

    =======
    Color name = 0Francky (it's a zero, but in this case === uppercase O and === lowercase o )
    1. "First, remove any hash-marks, then replace any non-hexadecimal characters (0-9a-f) with 0's."
      Then 0Francky > 0f0a0c00.
    2. "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."
      Result > 0f0a0c000 (last 0 added).
    3. "Next, the string is broken into three even parts, representing red, green and blue, from left to right."
      Result > RR/GG/BB = 0f0 a0c 000.
    4. "If the individual RGB values are over 8 characters long, they are truncated to 8 characters by removing characters from the left."
      N/A, still > RR/GG/BB = 0f0 a0c 000.
    5. "Once the individual RGB values are under 8 characters long they are truncated by removing characters from the right."
      Result > RR/GG/BB = 0f a0 00.

    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.
    • BTW, what is said when a dropping zero is falling on your toes?

    =======
    So my questions are:
    • How did you get the "0ea0b 0a000 0a00e" ? ("when I code my name I get 0ea0b 0a000 0a00e")
    • And/or: do you have an example name to admire the dropping zero?

  8. #8
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ) 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. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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.

    • 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •