HTML5 Tutorial - Input Type : Color

Input Type : Color

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.

As of writing, the only web browser that support color input is Opera 11.

BrowsersColor input Support
IE 9 Beta
Firefox 13
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.