Color picker in HTML and JavaScript

   November 18, 2022
Color picker in HTML and JavaScript

In this article, we will be creating a simple Color picker in HTML and JavaScript where the user can see and select a color and also copy its hex code. We will be using simple HTML and some basic javascript to get the job done.

Requirements

  • Code Editor (VS Code Preferred)
  • Chromium Browser (Chrome Preferred)
  • Basic Knowledge of HTML, CSS, Javascript, and Bootstrap

Features

  • Selecting a color from the color picker
  • Seeing the color in the background box
  • Getting the hex code of the selected color

The project will include just one file, index.html, we will be adding the small script within the HTML page itself and the same goes for the CSS file, we will be doing the CSS within the HTML page

Coding the Color picker in HTML and JavaScript

JavaScript code and logic

To define the function for selecting color we write a small function in js which is supposed to do the job.

function selectColor() {
        var selectedColor = document.getElementById("colorPicker").value;
        document.querySelector(".column").style.backgroundColor = selectedColor;

        document.getElementById("hexCode").value = selectedColor;
      }
      document
        .getElementById("colorPicker")
        .addEventListener("input", selectColor);

HTML code

The simple UI for the components of the site lies within simple divs

 <h1 class="heading">Simple Color Picker</h1>
 
    <div class="column justify-content-md-center">
 
        <div class="row justify-content-md-center">
            <div class="main">
                <label class="form-label">
                    Color Picker: <input type="color" id="colorPicker" value="#ffffff">
                </label>
                <label class="form-label">
                    Hex Code: <input cl type="text" id="hexCode" value="#ffffff">
                </label>
            </div>
        </div>
    </div>

Complete code for Color picker in HTML and JavaScript:

In general, if we sum up the whole logic for the color picker, we can do all this in one index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <title>Simple Color Picker</title>
  </head>
  <style>
    .column {
      border: 1px solid;
      min-height: 400px;
      max-width: 600px;
      margin: auto;
      border-radius: 10px;
    }

    .main {
      display: flex;
      flex-direction: column;
      margin-top: 20%;
      border-radius: 5px;
      padding: 10px;
      background-color: white;
    }

    .form-label {
      margin-top: 10px;
    }

    .heading {
      color: red;
      text-align: center;
      margin: 5% auto;
    }
  </style>

  <body>
    <h1 class="heading">Simple Color Picker</h1>

    <div class="column justify-content-md-center">
      <div class="row justify-content-md-center">
        <div class="main">
          <label class="form-label">
            Color Picker:
            <input type="color" id="colorPicker" value="#ffffff" />
          </label>
          <label class="form-label">
            Hex Code: <input cl type="text" id="hexCode" value="#ffffff" />
          </label>
        </div>
      </div>
    </div>

    <script>
      function selectColor() {
        var selectedColor = document.getElementById("colorPicker").value;
        document.querySelector(".column").style.backgroundColor = selectedColor;

        document.getElementById("hexCode").value = selectedColor;
      }
      document
        .getElementById("colorPicker")
        .addEventListener("input", selectColor);
    </script>
  </body>
</html>

Output:

Image output:

output for Color picker in HTML and JavaScript

    Video output:

    Conclusion:

    I hope this was easy to understand and that you enjoyed building and learning this at the same time, we learned to generate colors and get their hex values as well. Along the way, we did some basic dom-manipulation to change the background color of the div representing the selected color in Color picker in HTML and JavaScript.

    JavaScript and web Projects

    Also Read:

    Share:

    Author: Ayush Purawr