How does HTML parse <font color="testing">? [duplicate]

Question

With reference to Why does HTML think “chucknorris” is a color?

Is the following analysis correct?

1. First, all non-hex characters are replaced with '0'.

   testing -> 0e00000

2. Then if it is not divisible by 3, append '0's to it.

   0e00000 -> 0e0000000

3. Then split into 3 equal groups.

   0e0000000 -> 0e0 000 000

4. Then get the first 2 characters of each group and concatenate them together to get your colour code.

   0e0 000 000 -> 0e0000

#0e0000 is close to black.

But if you use this site and input font colour as "testing", it is displayed as a shade of red: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_font_color

Is there something I'm missing?

APPENDED AFTER ANSWERS:

I'm writing an Android app which needs me to parse font color = "" to colour codes. I'm putting the algorithm I cobbled together here for future reference:

public String getColourCode(String nonStandardColour) {
    String rtnVal = "#000000";
    
    // first replace all non-hex characters
    String converted = nonStandardColour.toLowerCase().replaceAll("[g-z]", "0");

    System.out.println(nonStandardColour + " is now " + converted);
    System.out.println("Length: " + converted.length());
    
    if (converted.length() <= 3) {

        // append "0"s if length != 3
        while (converted.length() !=3) {
            converted = converted + "0";
        }

        System.out.println("Converted colour is now " + converted);

        // Length is 3, so split into 3 characters and prepend 0 to each
        String[] colourArray = new String[3];
        colourArray[0] = "0" + convertedOpNickColour.substring(0, 1);
        colourArray[1] = "0" + convertedOpNickColour.substring(1, 2);
        colourArray[2] = "0" + convertedOpNickColour.substring(2, 3);
    
        rtnVal = "#" + Integer.toHexString(Color.rgb(
                            Integer.parseInt(colourArray[0], 16), 
                            Integer.parseInt(colourArray[1], 16), 
                            Integer.parseInt(colourArray[2], 16)));
    }

    else { // converted.length() is >= 4

        System.out.println("Appending 0s until divisible by 3");

        while(converted.length() % 3 != 0) {
            converted = converted + "0";
        }

        System.out.println("Converted colour is now " + converted);

        // divide into 3 equal groups
        List<String> colourArray2 = new ArrayList<String>();
        int index = 0;              
        while (index<converted.length()) {
            colourArray2.add(converted.substring(
                index, Math.min(index(converted.length()/3),converted.length())));
            index+=(converted.length()/3);
        }

        System.out.printf("The 3 groups are:");
        System.out.printf(colourArray2.get(0));
        System.out.printf(colourArray2.get(1));
        System.out.printf(colourArray2.get(2));

        // if the groups are e.g. 0f0 0f0 0f0
        if (rgbColour.get(0).length() >=3 ) {
            rtnVal = Integer.toHexString(Color.rgb(
                Integer.parseInt(colourArray2.get(0).substring(0,2), 16), 
                Integer.parseInt(colourArray2.get(1).substring(0,2), 16), 
                Integer.parseInt(colourArray2.get(2).substring(0,2), 16)));
          
            // remove alpha
            System.out.println("rtnVal is #" + rtnVal.substring(2));
            return "#" + rtnVal.substring(2);
        } 
        
        // groups are e.g. 0f 0f 0f
        else {
            rtnVal = Integer.toHexString(Color.rgb(
            Integer.parseInt(colourArray2.get(0), 16), 
            Integer.parseInt(colourArray2.get(1), 16), 
            Integer.parseInt(colourArray2.get(2), 16)));

            System.out.println("rtnVal is #" + rtnVal.substring(2));
            return "#" + rtnVal.substring(2);
        }
    }
    return rtnVal;
}

Answer 1

What it's actually doing is splitting it into the RGB values, not the hex color value. So you're not creating #0e0000, you're creating RGB(0e0, 000, 000). Since we know that 000 is simply 0, we only have to look at the 0e0 part of it. From here, you need to remove the leading 0s down to two digits if there are more than 2 digits, and then truncate to the two left digits in the number, which gives you e0. When you convert that from hex to decimal, you end up with e0 = 224. What this gives you is RGB(224, 0, 0), or a mostly red color.

More examples:

eesting   => ee00000   => ee0 000 000 => RGB(ee0, 000, 000) => RGB(ee, 00, 00) => RGB(238, 0, 0)
eeeting   => eee0000   => eee 000 000 => RGB(eee, 000, 000) => RGB(ee, 00, 00) => RGB(238, 0, 0)
eeeeing   => eeee000   => eee e00 000 => RGB(eee, e00, 000) => RGB(ee, e0, 00) => RGB(238, 224, 0)
eefeefeef => eefeefeef => eef eef eef => RGB(eef, eef, eef) => RGB(ee, ee, ee) => RGB(238, 238, 238)
teeteetee => 0ee0ee0ee => 0ee 0ee 0ee => RGB(0ee, 0ee, 0ee) => RGB(ee, ee, ee) => RGB(238, 238, 238)
0f0f0f    => 0f0f0f    => 0f 0f 0f    => RGB(0f, 0f, 0f)    => RGB(0f, 0f, 0f) => RGB(15, 15, 15)
tftftf    => 0f0f0f    => 0f 0f 0f    => RGB(0f, 0f, 0f)    => RGB(0f, 0f, 0f) => RGB(15, 15, 15)
ttfttfttf => 00f00f00f => 00f 00f 00f => RGB(00f, 00f, 00f) => RGB(0f, 0f, 0f) => RGB(15, 15, 15)

Answer 2

Yes you are right it is using following parsing algoritham with following steps First, remove any hash-marks, then replace any non-hexadecimal characters (0-9a-f) with 0's.

Eg: #DIXIT becomes D0000.

For lengths 1-2, right pad to 3 characters with 0's.

Eg: "0F" becomes "0F0", "F" becomes "F00".

For length 3, take each digit as a value for red, green, or blue, and prepend a 0 to that value.

Eg: "0F0" becomes RGB( 0, F, 0), which becomes RGB( 00, 0F, 00) or 000F00.

Any value shorter than 4 digits long is done at this point.

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.

Eg: "0F0F" becomes "0F0F00"

Next, the string is broken into three even parts, representing red, green and blue, from left to right.

"0F0F00" behaves as expected, becoming RGB(0F, 0F, 00). Any string of 6 characters is done at this point.

To verify above thing click here

To test algoritham check for following sample you will get same result

<body bgcolor="DIXIT">
<body bgcolor="D00000">

Following steps will be perform to parse dixit

1. Replace non hexadecimal values with 0 s for e.g D0000
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. so now 'D0000' will be 'D0 00 00' with RGB format.