HTML5 input color's default color

While using hexcode for value attribute in <input type="color">, one thing I noticed is that it has to be six digits, if for white you use #fff, it does not work. It has to be #ffffff.

The same thing happens when setting it through javascript. document.querySelector('input[type="color"]').value = '#fff' does not work. The color remains black. You have to use document.querySelector('input[type="color"]').value = '#ffffff' for it to work.

Something to be careful about.

Use value:

<input type="color" value="#ff00ff" />

If you want to know if input remain unchanged, you can do something like this (with jQuery):

$(function(){
    $('input').change(function(){
       $(this).addClass('changed');
    })
})

http://jsfiddle.net/j3hZB/

Edit: Now since, I have understood your question correctly, I have updated my answer.

Although the W3C Spec defines that the value attribute has a string representing the color, it doesn't define the default color. So I think that the implementation of default color is left at the discretion of the browser.

However, the WhatWG Spec anwers your question with this note,

Note: When the input type element is in the color state, there is always a color picked, and there is no way to set the value to the empty string.

Moreover, based on your expectation, the CSS language never defined a NULL attribute for any element, which makes it impossible for the input type='color' to have NULL as the default value.

Workaround:

The workaround is present in the Shadow DOM API.

Using Chrome Developer Tools, I found that we can give a transparent color to the pseudo element ::-webkit-color-swatch background property -

input[type=color]::-webkit-color-swatch 
{ 
    background-color: transparent !important; 
}

For the above CSS, your HTML should like this - <input type="color">. Now you don't need to have any kind of listener to tell if the user has changed the default color or not. You can simply treat the transparent color as the NULL color based on which you can make a decision whether the value was changed or not!

I am sure that you will find similar kind of information from the Shadow DOM for Firefox to set transparent value for background. IE still remains a pain for us.

Here is my solution, switching input type from text to color:

$(document).on('click', '.dc-color-input-switcher', function() {
  var dcInputColor = $(this).parent().parent().prev();
  if (dcInputColor.attr('type') == 'text') {
    dcInputColor.attr('type', 'color');
  } else {
    dcInputColor.attr('type', 'text');
  }
});

$(document).on('click', '.dc-color-input-clearer', function() {
  var dcInputColor2 = $(this).parent().parent().next();
  if (dcInputColor2.attr('type') == 'color') {
    dcInputColor2.attr('type', 'text');
  }
  dcInputColor2.val('');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <div class="input-group-btn">
    <div class="btn-group">
      <span title="Empty" class="btn btn-danger dc-color-input-clearer" data-original-title="Empty Field"><i class="fa fa-times"></i></span>
    </div>
  </div>
  <input name="product_tabs[1][0][bg_color]" value="" placeholder="Background Color" class="form-control pre-input-color" type="text">
  <div class="input-group-btn">
    <div class="btn-group">
      <span title="Toggle color picker" class="btn btn-primary dc-color-input-switcher" data-original-title="Switch color picker"><i class="fa fa-paint-brush"></i></span>
    </div>
  </div>
</div>