Simple color picker example

Color picker example

Today we are going to know how to use color picker in our code.This code be used in any programming language like in PHP,Java,Python wherever we use HTML Code.

Before that let us the basic thing about color picker.

Table of content

  1. What is Color picker?
  2. What are the uses 
  3. How to integrate color picker
  4. Conclusion

What is Color Picker?

The Color Picker Tool is basically used to select a color on any image opened on your screen or choose any color in from your opened browser. By clicking a point on an image, you can change the active color to that which is located under the pointer.

Color Pickers are primarily used to select and input colors. They are automatically converted into colors once submitted into the browser and then convert the input colors to a string that represents it.

What is the use of color picker ?

  • With Color picker you can choose your favorite color.
  • You no need to search color code code for everything,you can just use this tool in your code and save it.
  • Mainly when we work on e-commerce projects it will me most useful.
  • In e-commerce projects we may need to add color for your product, so for this it will be useful.
  • It also saves your time in choosing color.
  • Mostly for developers & designers t will be most useful.

How to integrate color picker Tool?

Now lets us go into our main topic which is how to integrate color color picker.This is very simple and you can do this by simply using <input type= “color”>

To get the below output the the provided HTML code.

Color picker

STEP 1: 

Create a HTML Page and add the below Code.

<!DOCTYPE html>
      <title>Color Picker</title>
      <div class="color_box">
         <h1 id="heading" style="text-align:center;">Color Picker</h1>
         <h3 id="subheading" style="text-align:center;">Add color picker in html and use in any programming language</h3>
         <div class="container">
            <input type="color" id="primary_color" class="field-radio">
            <span class="container" id="color_val">Color code</span>
            <span class="container" id="color_name">Color</span>

Inside the head tag add the CSS or you can create another page with .css and add add the external link inside the head tag.

<style type="text/css">
   input[type="color"] {
   width: 3rem;
   height: 3rem;
   padding: .5rem;
   background-color: transparent;
   border: 0;
   border-radius: 100%;
   input[type="color" i] {
   -webkit-appearance: square-button;
   width: 44px;
   height: 23px;
   background-color: buttonface;
   cursor: default;
   border-width: 1px;
   border-style: solid;
   border-color: rgb(169, 169, 169);
   border-image: initial;
   padding: 1px 2px;
   input {
   -webkit-appearance: textfield;
   background-color: white;
   -webkit-rtl-ordering: logical;
   cursor: text;
   padding: 1px;
   border-width: 2px;
   border-style: inset;
   border-color: initial;
   border-image: initial;
   input, textarea, select, button {
   text-rendering: auto;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   display: inline-block;
   text-align: start;
   margin: 0em;
   font: 400 13.3333px Arial;
   border-radius: 50%;
   height: 236px;
   width: 15%;
   border: none;
   outline: none;
   -webkit-appearance: none;
   position: absolute;
   top: 25%;
   left: 42%;
   #color_val {
   top: 38%;
   left: 60%;
   position: absolute;
   border: 1px solid black;
   padding: 10px;
   border-radius: 8px;
   font-size: 19px;
   font-weight: bold;
   #primary_color::-webkit-color-swatch-wrapper {
   padding: 0; 
   #primary_color::-webkit-color-swatch {
   border: none;
   border-radius: 50%;
   #color_name {
   top: 38%;
   left: 34%;
   position: absolute;
   padding: 10px;
   border-radius: 8px;
   font-size: 30px;
   font-weight: bold;
   input, textarea, select, button, meter, progress {
   -webkit-writing-mode: horizontal-tb;
STEP 3 :

Add the script after the body tag inside script tag.This script is used to show the choosed color code with the same color choosed  for allover the text in that page.

<script type="text/javascript">
   let colorButton = document.getElementById("primary_color");
   let colorDiv = document.getElementById("color_val");
   let heading = document.getElementById("heading");
   let subheading = document.getElementById("subheading");
   let color_name = document.getElementById("color_name");
   colorButton.onchange = function() {
       colorDiv.innerHTML = colorButton.value; = colorButton.value; = colorButton.value; = colorButton.value; = colorButton.value;

Related articles:


For more updates:

Follow us on our Facebook page :

Do Follow my Instagram page for more updates :

Join Our Telegram group for more updates :


Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.