Add color picker option using html

A color picker gives users various options to choose different colors. This blog will demonstrate the creation of simple and interactive color picker with HTML and CSS.

Working & Implementation of color picker

The html <input> element with the type=”color” property is used by the color picker. A JavaScript event listener notices the change and modifies the background color of an element when the user makes a color selection. This gives visitors to your website a dynamic and eye-catching method to interact.

1.html

This project’s HTML section establishes the fundamental framework, which includes a form with a color input and a div that shows the chosen color.

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="1.css">

    <title>Color Picker</title>
 </head>
 <body>
 <div class="parent flex-center">
    <div class="input-container">
        <label>
            Pick a color of your choice to change the box!!
        </label>
        <input type="Color" name="co" onchange="changeColor(this.value)">
    </div>
    <div id="box"></div>
 </div>
 <script type="text/javascript">
    function changeColor(color){
        document.getElementById('box').style.backgroundColor = color
    }
 </script>
 </body>

</html>

Within this code:

The {id{ {colorPicker{ designates the color input.
The chosen color will be displayed in the div element with the {id{ {colorDisplay}.

In this script:

An event listener is added to the color picker that triggers on input change.
The selected color is used to update the background color and text of the colorDisplay div.

1.css

To make the page visually appealing, the color display div and the CSS styles are applied.

.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: lightsteelblue;
}

label{
    font-style: italic;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    font-size: 600;
    margin-right: 45px;
    color: rgb(1, 5, 5);
    font-size: 1.2em;
}

#box{
    width: 400px;
    height: 400px;
    border-radius: 4px;
    background-color: rgb(2, 0, 10);
    margin-top: 40px;
}

Within this style guide:

The {body} is dressed for simplicity.
The text is centered, the {colorDisplay} div has a defined size, and its initial backdrop color is set.

OUTPUT

In summary,
HTML, CSS, and JavaScript may be combined to build a straightforward but powerful color picker. Applications such as theme customizers, design tools, and user preference settings can all make advantage of this interactive element. Try experimenting with this code to improve the functionality and add more features to your web projects!

Working & Implementation of color picker

Related Posts

Leave a Comment Cancel Reply