Hii,

In this blog i am sharing an example of creating a color picker using javascript without using any external link/library/plugin.

There  are many browser's addons tools and online tools available using which we can choose color code and apply, but if you want to learn how any color picker tool work and help developer to choose any color you must go through the example below.

HTML:Html code we can use  as per the requirements.This is just an example in which color picker code is used.

<h2>Choose any color from the color picker an apply it as button's text color</h2>

	<button class="jscolor {valueElement:'chosen-value', onFineChange:'setTextColor(this)'}">
		Hii,choose any color from the color picker and apply it on the text inside button.
	</button>

	HEX value: <input id="chosen-value" value="000000">
	
	 <p>Note: Whether you write color code in rgb code or hex code,the code will appear as HEX code.</p>

JAVASCRIPT:

"use strict";


if (!window.jscolor) { window.jscolor = (function () {


var jsc = {


	register : function () {
		jsc.attachDOMReadyEvent(jsc.init);
		jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
		jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
		jsc.attachEvent(window, 'resize', jsc.onWindowResize);
	},


	init : function () {
		if (jsc.jscolor.lookupClass) {
			jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);
		}
	},


	tryInstallOnElements : function (elms, className) {
		var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');

		for (var i = 0; i < elms.length; i += 1) {
			if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') {
				if (jsc.isColorAttrSupported) {
					// skip inputs of type 'color' if supported by the browser
					continue;
				}
			}
			var m;
			if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) {
				var targetElm = elms[i];
				var optsStr = null;

				var dataOptions = jsc.getDataAttr(targetElm, 'jscolor');
				if (dataOptions !== null) {
					optsStr = dataOptions;
				} else if (m[4]) {
					optsStr = m[4];
				}

				var opts = {};
				if (optsStr) {
					try {
						opts = (new Function ('return (' + optsStr + ')'))();
					} catch(eParseError) {
						jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr);
					}
				}
				targetElm.jscolor = new jsc.jscolor(targetElm, opts);
			}
		}
	},

Note: Above javascript code is explained  briefly,Please check the file attached below to see the whole concept of color picker using  javascriptcode.