Why Are 3-Digit Hex Color Code Values Interpreted Differently in Internet Explorer

Why are 3-digit hex color code values interpreted differently in Internet EXPLORER?

I was able to recreate it in IE11 as well. As you know, it is a deprecated attribute. I assume your webpage & the browser are trying to interpret the code as HTML5 and there is a bug in their graceful degradation to handle this. So it just breaks.

As @Aaron Vanston points out, using inline style or CSS, you can still use the shorthand hex to apply a color.

I wouldn't even waste my time writing out bgcolor as an attribute. If I came across it in something I was working on, I'd remove it in favor of

style="background-color: #fff"

or the CSS alternative

body {
    background-color: "#fff";
}

How can I use 3-digit color codes rather than 6-digit color codes in CSS?

The three-digit codes are a shorthand, and #123 is the same as #112233. In the example you give, you've (effectively) swapped #FDFEFF for #FFFFFF, which is close to the original colour, but obviously not exact.

It doesn't "matter" which version you use, as such, but three-digit colour codes mean you have a little less choice in shades. If you feel that saving 300 bytes is worth that, then go ahead and use the three-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.

Does Microsoft Edge support short color codes?

yep! It works

That being said, I can only get this to show up using bgcolor in any version of IE

Gradient colors in Internet Explorer

Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx

How does hexadecimal color work?

Hexadecimal uses sixteen distinct symbols, in the case of css color the symbols 0–9 to represent values zero to nine (obviously), and A, B, C, D, E, F to represent values ten to fifteen. So, using one Hexadecimal character you can represent 16 values. With two Hexadecimal you can represent 256 (16*16) values.

In RGB you have colours represented by Red Green Blue (R=0-255, G=0-255, B=0-255), so we use 3 pairs of Hexadecimal symbols! So when you see an RGB color, you can make the calculation below.

Example:

Hex: #4C8ED5 is RGB: 76, 142, 213.

Because 4C = 76(Red), 8E = 142(Green), D5 = 213(Blue)!

Hope it helps your understanding!

More to read: Hexadecimal on Wikipedia and a nice RGB to Hexidecimal Converter

Hex colors: Numeric representation for transparent?

Transparency is a property outside the color itself, and it's also known as alpha component. You can't code transparency as pure RGB (which stands for red-green-blue channels), but you can use the RGBA notation, in which you define the color + alpha channel together:

color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */

If you want "transparent", just set the last number to 0, regardless of the color. All of the following result in "transparent" even though the color part is set to 100% red, green and blue respectively:

color: rgba(255, 0, 0, 0); /* transparent */
color: rgba(0, 255, 0, 0); /* transparent */
color: rgba(0, 0, 255, 0); /* transparent */

There's also the HEXA notation (or RRGGBBAA) now supported on all major browsers, which is pretty much the same as RGBA but using hexadecimal notation instead of decimal:

color: #FF000080; /* red at 50% opacity */

Additionally, if you just want a transparent background, the simplest way to do it is:

background: transparent;

You can also play with opacity, although this might be a tad too much and have unwanted side effects in your case:

.half {
  opacity: 0.5;
  filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */
}

Why does HTML think “chucknorris” is a color?

It’s a holdover from the Netscape days:

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

It is from the blog post A little rant about Microsoft Internet Explorer's color parsing which covers it in great detail, including varying lengths of color values, etc.

If we apply the rules in turn from the blog post, we get the following:

1. Replace all nonvalid hexadecimal characters with 0’s:

   chucknorris becomes c00c0000000
   

2. Pad out to the next total number of characters divisible by 3 (11 → 12):

   c00c 0000 0000
   

3. Split into three equal groups, with each component representing the corresponding colour component of an RGB colour:

   RGB (c00c, 0000, 0000)
   

4. Truncate each of the arguments from the right down to two characters.

Which, finally, gives the following result:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Here’s an example demonstrating the bgcolor attribute in action, to produce this “amazing” colour swatch:

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

---

Related Topics