Summary -

In this topic, we described about the Color Input type with detailed example.

The color input type allows the user to choose a color from a color picker and returns the color value in hexadecimal format (#rrggbb). If we don't stipulate a value, the default is #000000, which is black.

Syntax -

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

Example -

Below example describes how to choose a color from a color picker.
<!DOCTYPE html>
<html lang="en">
 <head>
    <title>Color Input Type</title>
    <script>
       function getValue() { 
       var color = document.getElementById("mycolor").value; 
       alert(color);
      } 
    </script>
 </head>
 <body> 
   <form>
     <label for="mycolor">Choose Color:</label>
     <input type="color" value="#ff00ff" id="mycolor">
     <button type="button" onclick="getValue();"> Get Value</button>
   </form>
   <p>Selected color value is - <div id="display-value"></div></p>
 </body> 
</html>

Output -

Color Input Type

Selected color value is -


Note! The color input (i.e. type="color") is supported in each main modern web browsers such as Opera, Chrome, Firefox, Safari (12.1+), Edge (14+). Not endorsed by the older version of Apple Safari and Microsoft Internet Explorer browsers.
Browser Support

The following browsers and corresponding versions in the table that completely supports the color type.

Input Type Chrome Edge Firefox Safari Opera
Type="color" 20.0 38.0 29.0 10.1 11.01