Input Type : Color

(Copied from for training and demonstration purposes.)

In HTML5, we can have color input with simply <input type="color">. The textbox should only carry value of so called "simple color" string in lowercase such as #ff0000 for Red Color, #000000 for Black Color and #ffffff for White color.

BrowsersColor input Support
 IE 9 Beta
 Firefox 33.1✓ (entered by Lyndsay Dec 14)
 Safari 5
 Chrome 20
 Opera 11

With Color input type, you no longer need a complex Javascript color picker, a simple line of code below will do the work.

<label for="background-color">Choose a calor for background :</label>
<input id="background-color" type="color" />
Color input in Opera 11 Color input in Opera 11

If you are lucky enough to have web browser that support color input, please feel free to try the demo below.