Skip to content
Related Articles

Related Articles

How to add color picker in a form using HTML ?

Improve Article
Save Article
  • Last Updated : 05 Oct, 2021
Improve Article
Save Article

In this article. we will learn how to add a color picker in a form using HTML.  As we know, a color picker is also known as a color-chooser. It is an interface in which a user can select a single color from multiple collections of background colors.  


  • First, we create an HTML document that contains an <input> tag.
  • Use the type attribute with the <input> element.
  • Set the type attribute to value “color”.


<input type="color">



<!DOCTYPE html>
        How to add a color picker 
        in form using HTML?
<body style="text-align: center;">
        How to add a color picker 
        in Form using HTML?
        <label>First Name</label>
        <input type="text" name="fname"><br /><br>
        <label>Last name</label>
        <input type="text" name="lname"><br />
            Select your favorite color:
            <input type="color" value="red" id="color" />
        <input type="submit" value="submit">



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!