HTML5 Color Input Type

In web application, sometimes you may need to provide color picker option in web page development. HTML5 introduced new input type "color", which allows the user to pick a color and it returns six-digit hexadecimal RGB color value such as #ff0000 for Red Color, #000000 for Black Color and #ffffff for White Color etc.

In order to display color picker in your web page, you have to add type="color" in input element. The whole idea behind this is that a number of standard color choices or the option to select other, which brings up the operating system color picker.

If you had worked with earlier version of HTML you would have used third party or custom color picker in Javascript. Well, now you don't need to worry about it. HTML5 makes your development life easier, in order to achieve this, you have to add type="color" in your input element, rest HTML5 will take care for you.

If a browser supports this input type, you can take the advantage of these new feature of HTML5 with very less efforts.

Syntax

<input id="color" type="color"/>

As of writing, only few browsers provide support for this new feature.

Browser Supports

If you want to make your textbox self explanatory, you can use additional attribute "Placeholder" by assigning meaningful text. The "placeholder", in the color textbox example, will look like this:

Syntax

<input id="color" type="color" placeholder="Pick Color"/>
Here is a simple demo.

Example

<!DOCTYPE html>
<html>
<head>
  <!-- www.techstrikers.com -->
  <meta charset="utf-8">
  <title>HTML5 Color Input Type Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 Color Input Type</legend>
<table>
  <tr>
 <td><label for="bgcolor">Pick Color : </label>
<input id="bgcolor" type="color" value="#ff0000" 
onchange="javascript:document.getElementById('selectedColor').value = 
document.getElementById('bgcolor').value;"/>
<br/>
<label for="selectedColor">You have chosen : </label>
<input id="selectedColor" type="text" readonly value="#ff0000"/></td></tr>
</table>
</fieldset>
</body>
</html>
See Live Example