Using HTML &nbsp; entity in the <div> templates breaks true XHTML.

[Eurythrace]

First, thanks for writing such a nice, compact color picker.

However, the use of the &nbsp; entity in the 2 <div> templates breaks jQuery in the append method in a true XHTML environment. A simple change to the &#xA0; entity resolves the issue.

Further, it would be nice (I have already made the change to my copies) to convert the shorthand 3 character hex syntax into the full 6 character hex syntax in the toHex method, so that the input is always 7 characters, including the leading # sign.

Finally, there appears to be no simple way to make the colorPicker reset when the form reset button is pushed. I made a work around by saving the initial value of the input field in a global variable and then adding a click event handler to the reset button that calls the changeColor method with the saved value as the argument.

In case anyone is interested, here is some CSS for a nice little <div> wrapper element around the input text element, like so:
<div class="colorPicker-frame"><input type="text" id="color1" ... /></div>

div.colorPicker-frame
{
display: inline-block;
width: 60px;
height: 20px;
background-image: -webkit-linear-gradient( top, rgba( 186, 186, 186, 1 ), rgba( 200, 200, 200, 1 ) 12px, rgba( 160, 160, 160, 1 ) );
background-image: -moz-linear-gradient( top, rgba( 186, 186, 186, 1 ), rgba( 200, 200, 200, 1 ) 12px, rgba( 160, 160, 160, 1 ) );
background-image: -ms-linear-gradient( top, rgba( 186, 186, 186, 1 ), rgba( 200, 200, 200, 1 ) 12px, rgba( 160, 160, 160, 1 ) );
background-image: -o-linear-gradient( top, rgba( 186, 186, 186, 1 ), rgba( 200, 200, 200, 1 ) 12px, rgba( 160, 160, 160, 1 ) );
background-image: linear-gradient( to bottom, rgba( 186, 186, 186, 1 ), rgba( 200, 200, 200, 1 ) 12px, rgba( 160, 160, 160, 1 ) );
vertical-align: bottom;
border: 1px solid rgba( 128, 128, 128, 1 );
border-radius: 4px;
margin-left: 1em;
padding: 3px 6px 3px 6px;
box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 );
}

div.colorPicker-picker
{
width: 58px;
height: 18px;
border-color: rgba( 160, 160, 160, 1 ) rgba( 208, 208, 208, 1 ) rgba( 208, 208, 208, 1 ) rgba( 160, 160, 160, 1 );
border-style: solid;
border-width: 1px;
cursor: pointer;
}

Cheers.