Highly customizable jscolor provides variety of configuration options. Whether you need to change color picker's size or colors, or attach a function to its onchange event, the configuration can be fine-tuned …

Customizing defaults <script src="jscolor.js"></script> <script> // let's set default options for all color pickers jscolor.presets.default = { value: '#88DD20', position: 'right',

Generates a random color and sets it to the picker. If you wish to restrict some of the channels to a specific range, you can specify minimum and maximum boundaries for channels V, S, H, A (value, …

Add data-jscolor attribute to all desired input or button elements:

(configured to hide upon clicking bottom palette) </p> <script> // Here we can adjust defaults for all color pickers on page:

Configure and customize jscolor, a JavaScript color picker, to suit your web application needs with various options and settings.

<input data-jscolor=" {random:true}"> </p> <p> Random color within specified range: Value = 80-100, Saturation = 10-20, Hue = 0-359</p> <input data-jscolor=" {random: [80, 100, 10, 20, 0, 359]}"> </p>

<em id="pr4" style="display:inline-block; padding:1em;">input event</em> <script> function update(picker, selector) { document.querySelector(selector).style.background = picker.toBackground(); }

<h3>Custom valueElement and alphaElement</h3> <p> <button data-jscolor=" {valueElement:'#val1', alphaElement:'#alp1'}"> Pick color </button> valueElement: <input id="val1" value="AB2567"> …

<p>Color: <input value="rgba (51,153,255,0.5)" data-jscolor=" {}" name="myColorInput" oninput="console.log (this.jscolor.toString () + ' ' + this.name)"> </p> <p>Color: