How to Use 3-Digit Color Codes Rather Than 6-Digit Color Codes in CSS

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.

How to convert 3-digit HTML hex colors to 6-digit flex hex colors

The three digit hex colors are expanded by doubling each digit (see w3 spec).
So #F3A gets expanded to #FF33AA.

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";
}

Is there any technical benefit in using 6-digit HTML color codes when 3 digits will suffice?

There is no significant difference.

Yes, they could shave a few bytes off their network payload by shortening #990000 to #900 and I admit that I'm surprised that their CSS minifier didn't do that.

Then again, if they are sending it over the network using compression (which they probably are), then compression will totally take care of those three bytes.

Hence, no significant difference.

Why do 3 digit hex css colors convert to 6 the way they do?

From the W3C spec:

The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

You can read more about it here: http://www.w3.org/TR/css3-color/

convert to 3-digit hex color code

To convert a 3-character hex code into a 6 character one, you need to repeat each character:

$hex = '#fff';
$hex6 = '#' . $hex[1] . $hex[1] . $hex[2] . $hex[2] . $hex[3] . $hex[3];

If you want to convert it to decimal you can use the hexdec function

Why does the below mentioned hex color code visually have the same color as the 6 digit hex code?

You are correct that second digit in each pair represents a shade. This is calculated from the hexadecimal representation of the number. Specifically, this is x * 16 * x for each pair. For example, F has a hexadecimal value of 15, so the pair FF would be 15 * 16 + 15. This would give you 255, which is the maximum value possible.

This can be seen in the following:

.color1 {  background: #A1BD24; /* rgb(161, 189, 36) */}
.color2 {  background: #A0B020; /* rgb(160, 176, 32) */}
.color3 {  background: #AB2; /* rgb(170, 187, 34) */}
.color4 {  background: #AABB22; /* rgb(170, 187, 34) */}

<div class="color1">Test 1</div><div class="color2">Test 2</div><div class="color3">Test 3</div><div class="color4">Test 4</div>