HTML Color Picker
HTML Color Picker

Hy guys, In this tutorial we are going to create a simple HTML Color Picker. We will use javascript to get our HTML Color picker value. It will be a very easy simple way to create a color picker like this, Let’s start our work!

HTML provides default color picker with <input type=’color’>. We can access the color picker’s value using javascript. For creating an HTML Color picker we will need to create two files called index.html and style.css.

first, create a div with id = “container”, the container will contain all the code of the color picker. Write the code in <body> and </body> tag.

<div id="container">

</div>


Now create an h2 tag and give the heading “Color Picker” as our title.

<div id="container">
   <h2>Color Picker</h2>
</div>

It’s time to create our color picker let’s create an input element give the type as color, id as colorpicker, onchange value as mycolor(), and value as #000000 (black).

<div id="container">
    <h2 for="colorpicker">Color Picker</h2>
    <input type="color" id="colorpicker" onchange="mycolor()" value="#000000">   

  </div>

Now create a paragraph and give the id=” demo “, we will use this element to show the current color picker value.

<div id="container">
    <h2 for="colorpicker">Color Picker</h2>
    <input type="color" id="colorpicker" onchange="mycolor()" value="#000000">   
    <p id="demo">#0000FF</p>
  </div>

Now create a script after the div tag. Create a script tag.

<script type="text/javascript">

</script>


Create a function as we mentioned in the input element on onchange attribute.

<script type="text/javascript">
   function mycolor(){
 
   }
</script>


Inside the function, we will create a variable ‘x’ and put the color picker’s value using the document.getElementById method.

<script type="text/javascript">
    function mycolor() {
      var x = document.getElementById("colorpicker").value;

    }
  </script>


We will show this x value in our paragraph tag using the paragraph’s id.

<script type="text/javascript">
    function mycolor() {
      var x = document.getElementById("colorpicker").value;
      document.getElementById("demo").innerHTML = x;

    }
  </script>


We will also use this value to change our div’s box shadow color.

<script type="text/javascript">
    function mycolor() {
      var x = document.getElementById("colorpicker").value;
      document.getElementById("demo").innerHTML = x;
      document.getElementById("container").style.boxShadow = "0px 0px 8px "+x;
    }
  </script>


Here is our index.html code is complete everything is written inside the <body> and </body> tag.

Let’s create our style.css file.
Link CSS in HTML file using <link >tag.

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


Write the CSS code. first, we will define our div’s property.

#container{
	width: 250px;
	height: 250px;
	margin: 100px auto;
	box-shadow: 0px 0px 8px black;
	text-align: center;
	padding: 20px;
	border-radius: 40px;
}


here we have defined width and height as 250px to make it square. margin’s first value will bring it down and other value “auto” will put it into the center from the horizontal axis. Then we defined the box-shadow as 0px from the top, 0px from left, and 8px as blur the shadow color is defined as black.
Text is aligned to center padding of the div is 20px and border-radius is set to 40px to make the border round.

h2, input, p{
	display: block;
	margin: auto auto;
	margin-top: 25px;
}

Common properties for h2, input and p are defined as display block it will show all the elements line by line, the margin is set to auto it will make it center. and margin from the top is set to 25px to give the space between all the elements.

input{
	width: 70px;
	height: 70px;
	background-color: white;
	border: 0px;
}

we have defined properties for the input tag also. The width and height are set to 70px to make it square. The background color is set to white as the body’s background. and the border is set to 0px to make it borderless.

p{
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
}

Here we set the font size for the paragraph tag as 20px, font-weight is set to bold to make the text bold. And text-transform property is set to uppercase to make the paragraph capitalize.

Here Our work is complete, You can run this code in the below section!

<!DOCTYPE html>
<head>
  <title>HTML Color Picker</title>
  <style>
    #container{
	width: 250px;
	height: 250px;
	margin: 100px auto;
	box-shadow: 0px 0px 8px black;
	text-align: center;
	padding: 20px;
	border-radius: 40px;
}
h2, input, p{
	display: block;
	margin: auto auto;
	margin-top: 25px;
}
input{
	width: 70px;
	height: 70px;
	background-color: white;
	border: 0px;
}
p{
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
}
  </style>
</head>
<body>
  <div id="container">
    <h2 for="colorpicker">Color Picker</h2>
    <input type="color" id="colorpicker" onchange="mycolor()" value="#000000">   
    <p id="demo">#0000FF</p>
  </div>

  <script type="text/javascript">
    function mycolor() {
      var x = document.getElementById("colorpicker").value;
      document.getElementById("demo").innerHTML = x;
      document.getElementById("container").style.boxShadow = "0px 0px 8px "+x;
    }
  </script>
</body>
</html>



If you are having any issues with this code then you can visit our GitHub account for code. Click Here!

Thank You for reading

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply