How to Create Color Picker Using Html, Css and JavaScript ?

How to Create Color Picker Using Html, Css and JavaScript

In this article, I will tell you an easy way to create a color picker using HTML5. This color picker is commonly used on websites that have a color picking function.

Immediately, yes, in HTML5, it turns out that an input type is already provided that handles the need to choose a color. This input type is named color. How to make it very simple, same as creating another type of input the type we use is called color.

<input type="color" value="#1DB8CE" id="colorPicker"/>

When we declare color of input type, then when we click then input color will bring option. Of course, whatever color we choose on the palette, it will be the value of the element itself.

For those of you who have never used this input type, its use is basically the same as a normal input type, with no special treatment. Inputs with this color type also have a value like other input types, so we can take the value from the input color picker.


How to Create Color Picker Using Html, Css and JavaScript :-

Html Code :-

<div class="color-picker">
  <label for="colorPicker">
  <input type="color" value="#1DB8CE" id="colorPicker"/>
  </label>
</div>

Css Code :-

<style type="text/css">
 [type='color'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  width: 11px;
  height: 11px;
  border: none;
}

[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type='color']::-webkit-color-swatch {
  border: none;
}
.color-picker {
 padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
}</style>

JavaScript Code :-

<script type="text/javascript">
//<![CDATA[
/* Color Picker JavaScript By SmartTechMukesh.Com */
document.querySelectorAll('input[type=color]').forEach(function(picker) {

  var targetLabel = document.querySelector('label[for="' + picker.id + '"]'),
    codeArea = document.createElement('span');

  codeArea.innerHTML = picker.value;
  targetLabel.appendChild(codeArea);

  picker.addEventListener('change', function() {
    codeArea.innerHTML = picker.value;
    targetLabel.appendChild(codeArea);
  });
});
  
//]]>
</script>

Conclusion :-

This is an easy way to build a simple color picker using HTML, CSS and JavaScript that you can use in any of your web design projects. You can use this code in your babe design project anywhere on blogger.com or any other platform like WordPress.

In this post, I shared how to create a color picker using HTML, CSS and JavaScript. I hope this method of creating color picker using HTML, CSS and Javascript can be very useful for you and your blog.

Reference:
smarttechmukesh.com

Admin

Hey there! My name is Mukesh Kushwaha, I am a Professional Web Designer, Graphic Designer, UI/UX Designer, Logo Designer and Banner Designer. I am Content Creator from Bihar State, India. I love coding and editing, so I always try to create something new and interesting.
facebook instagram twitter pinterest telegram

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

Previous Post Next Post