How to add color picker in a form using HTML ?

Last Updated : 17 May, 2023

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. When we submitted the color, the browser convert it into string form.

Approach:

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

Syntax

<input type="color">

Example: In this example, we will add color in the type attribute to the input element.

HTML

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