Simple jQuery UI enabled Color Picker – evol-colorpicker.js

Simple jQuery UI enabled Color Picker – evol-colorpicker.js
If you are looking for simple color picker for your website to dynamically set or insert color code in database. I found awesome color picker plugin (evol-colorpicker.js). evol-colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup bound to a text box. It comes with several color palettes, can track selection history and supports “transparent” color. It is a full jQuery UI widget, supporting various configurations and themes.

jQuery Color Picker

Integrate evol-colorpicker on input box


Load jQuery UI theme CSS, as well as its own included base CSS file (evol-colorpicker.css). Here we use the “ui-lightness” theme as an example. Then load jQuery (v3.1 or greater), jQuery UI (v1.12.1 or greater), and the plugin (for earlier version of jQuery-UI, use an earlier version of Colorpicker).

<link rel="stylesheet" type="text/css" href="">
<link href="evol-colorpicker.min.css" rel="stylesheet" type="text/css">
<script src="" type="text/javascript" charset="utf-8"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
<script src="evol-colorpicker.min.js" type="text/javascript" charset="utf-8"></script>

Now create simple text box, where on focus a color picker popup will open to select any color code you want.

<input style="width:100px;" id="mycolor" />
$(function() {  

Create a basic inline color picker with “web” default palette on your web page.

<div id="inline"></div>
$(function() {  

You can customize colorpicker by using following options.

$(function() {  
    color: "#ffffff", 
    defaultPalette: 'web', //Used to set the default color palette. Possible values are "theme" or "web".
    hideButton: true, 
    history: false, 
    initialHistory: ["#ff0000", "#00ff00", "#0000ff"], 
    showOn: "button", //Have the colorpicker appear automatically when the field receives focus ("focus"), appear only when a button is clicked ("button"), or appear when either event takes place ("both"). This option only takes effect when the color picker is instanciated on a textbox.
    transparentColor: true //Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff".  

There are list of public methods to customize the color picker.

$(function() {  
//Get or set the currently selected color value (as a string, ie. "#d0d0d0").
var colorValue = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");

List of events

$("#mycolor").on("change.color", function(event, color){
    $('#title').css('background-color', color);
This event is triggered when the mouse moves over a color box on the palette.
$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').css('background-color', color);

See live demo and download source code.


Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.