Color Picker

Color Picker tool with pure Javascript.

by TrickyUI

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<div class="input-group">
				 <input type="text" class="form-control">
				 <div class="input-group-addon color-palette" data-id="colors">
						 <i class="material-icons" data-id="cat_color"></i>
				 </div>
			</div>
		</div>
	</div>
</div>

CSS

.material-icons {
    width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: darkgray;
		display: inline-block;
		cursor: pointer;
}
.row {
	margin-top: 50px;
}
.color-palette {
     position: relative;
}
 .color-palette .color-box {
     position: absolute;
     padding: 6px;
     right: 0px;
     top: 100%;
     z-index: 9;
     min-width: 270px;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     background-color: #ffffff;
     border-radius: 4px;
     border: 1px solid #f5f5f5;
}
 .color-palette .color-box > div {
     float: left;
     width: 30px;
     height: 30px;
     border: 3px solid #ffffff;
     border-radius: 50%;
     margin: 6px;
}
.form-control {
	height: 40px;
  background: #ffffff;
}

JavaScript

// Color palette
var colors = ['#ef4438', '#e71f63', '#8f4098', '#65499d', '#4555a5', '#478fcc', '#38a3dc', '#0abbd3', '#009688', '#4dae4c',  '#8ac147', '#cddc35', '#fde937', '#fbc015', '#f8981f', '#f0592b', '#afbdc4', '#607d8b', '#bdaaa4', '#795649', '#eeeded', '#9d9d9d',  '#616161', '#202020'];

// foreach loop for multiple colorbox
var elements = document.querySelectorAll('[data-id="cat_color"]');
elements.forEach(function (e) {
   e.addEventListener('click', function (ev) {
      if (document.querySelectorAll('.color-box').length >= 0) {
         // remove sibling colorbox
         document.querySelectorAll('.color-box').forEach(function (e) {
              e.remove();
         });
         // creating colorbox 
         // creating color dots on the basis or color pallete array list
         var node = document.createElement("DIV");
         node.setAttribute('class', 'color-box');
         node.setAttribute('id', 'color_box');
         for (i = 0; i < colors.length; i++) {
             var item = document.createElement('DIV');
             item.setAttribute('class', 'color');
             item.setAttribute('style', 'background-color:' + colors[i]);
             item.setAttribute('onclick', 'setColor(this)');
             node.appendChild(item);
         }
         e.parentNode.appendChild(node);
      }
   });
});

// set dot color in to main dot
function setColor(color) {
 color.parentNode.previousElementSibling.style.backgroundColor = color.style.backgroundColor;
 document.querySelector('body').style.backgroundColor = color.style.backgroundColor
}

// remove colorbox on click on document outside the colorbox
window.onload = function () {
   document.onclick = function (e) {
       var elem = document.getElementById('color_box');
       if (elem) {
           if (e.target.dataset.id !== 'cat_color' && e.target.id !== 'color_box') {
             document.getElementById('color_box').remove();
           }
       }
   }
}