Add HTML5 Color Picker Feature On Website Using ColorPick.js

HTML5 Color Picker

In this appendix I am going to do its stuff you how to Add HTML5 Color Picker Feature On Website Using ColorPick.js, ColorPick.js is a easy and minimal jQuery color picker plugin for the lecture to looking web. This plugin is quite awesome to unite theme color changer. Or have enough maintenance enthusiast custom feature to choose color code as per their privilege. This color picker with exploit user recent chosen color pick by using HTML5 local storage to buildup and entry the recent colors chosen by your users.

Features:

* The recently used colors are automatically saved to local storage
* Simplicity of integration
* Gorgeous dissenter design that will feat approximately all website

Add HTML5 Color Picker On Website Using ColorPick.js

Follow out cold steps to join color picker feature approaching your website.

Libraries

Include taking into consideration CSS (colorPick.css) + JS (colorPic.js), ColorPick.js requires jQuery. This is the on your own dependency. Make certain to load it in the back ColorPick.js.

<!-- CSS -->
<link rel="stylesheet" href="colorPick.css">
 
<!--JS-->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="colorPick.js"></script>

CSS

Styling the color picker selector using later than CSS.

<style>
		.picker {
			border-radius: 5px;
			width: 36px;
			height: 36px;
			cursor: pointer;
			-webkit-transition: all linear .2s;
			-moz-transition: all linear .2s;
			-ms-transition: all linear .2s;
			-o-transition: all linear .2s;
			transition: all linear .2s;
			border: thin solid #eee;
		}
		.picker:hover {
			transform: scale(1.1);
		}
	</style>

HTML

Add a HTML element to area the color picker.

<div class="picker"></div>

JS

Finally call colorPick() accomplish upon page to display basic color picker.

<script>
    $(".picker").colorPick();
  </script>

You can pass more other in your color picker to mount going on calculation feature bearing in mind perform recent selected color select.

<script>
		$(".picker").colorPick({
			'initialColor' : '#8e44ad',
			'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
			'onColorSelected': function() {
				alert("The user has selected the color: " + this.color);
				this.element.css({'backgroundColor': this.color, 'color': this.color});
			}
		});
	</script>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.