Click here to Skip to main content
15,861,168 members
Articles / Web Development / LESS

ColorPicker - a jQuery UI Widget

Rate me:
Please Sign up or sign in to vote.
4.97/5 (51 votes)
2 Oct 2020MIT4 min read 212.3K   4.3K   99   57
A web color picker which looks like the one in Microsoft Office 2010

Introduction

This project is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup binded to a text box. It is a full jQuery UI widget, supporting various configurations and themes.

 

The project and a live demo are hosted on GitHub.

Using the Code

First, load jQuery (v1.7 or greater), jQuery UI (v1.8 or greater), and the widget code:

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
 type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" 
 type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file "evol.colorpicker.css". Here, we use the "ui-lightness" theme as an example:

JavaScript
<link rel="stylesheet" type="text/css" 
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" />
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css" />

Now, let's attach it to an existing <input> tag:

JavaScript
<script type="text/javascript">
   $(document).ready(function() {
       $("#mycolor").colorpicker();
   });
</script>
 
<input style="width:100px;" id="mycolor" />

This will wrap it into a "holder" <div> and add another <div> beside it for the color box:

HTML
<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

Using the same syntax, the widget can also be instantiated on a <div> or a <span> tag to show inline. In that case, the generated HTML is the full palette.

Options

evol.colorpicker provides options to customize its behavior:

color (String)

Used to set the default color value.

JavaScript
$("#mycolor").colorpicker({
    color: "#ffffff"
});

Defaults to null.

defaultPalette (String)

Used to set the default color palette. Possible values are "theme" or "web".

JavaScript
$("#mycolor").colorpicker({
    defaultPalette: 'web'
});

Defaults to theme.

displayIndicator (Boolean)

Used to show color value on hover and click inside the palette.

JavaScript
$("#mycolor").colorpicker({
    displayIndicator: false
});

Defaults to true.

hideButton (Boolean)

Prevent a color button from being added to the textbox the colorpicker is bound to.

JavaScript
$("#mycolor").colorpicker({
    hideButton: true
});

Defaults to false.

history (Boolean)

Used to track selection history (shared among all instances of the colorpicker).

JavaScript
$("#mycolor").colorpicker({
    history: false
});

Defaults to true.

initialHistory (Array of strings)

Used to provide a color selection history. Colors are provided as strings of hexadecimal color values.

JavaScript
$("#mycolor").colorpicker({
    initialHistory: ["#ff0000", "#00ff00", "#0000ff"]
});

Defaults to null.

showOn (String)

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 instantiated on a textbox.

JavaScript
$("#mycolor").colorpicker({
    showOn: "button"
});

Defaults to "both".

strings (String)

Used to translate the widget. It is a comma separated list of all labels used in the UI.

JavaScript
$("#mycolor").colorpicker({
    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs"
});

Defaults to "Theme Colors,Standard Colors,Web Colors,Theme Colors".

transparentColor (Boolean)

Allow for selection of the "transparent color". The hexadecimal value for it is "#0000ffff".

JavaScript
$("#mycolor").colorpicker({
    transparentColor: true
});

Defaults to false.

Events

change.color

This event is triggered when a color is selected.

JavaScript
$("#mycolor").on("change.color", function(event, color){
    $("#title").attr("style", "background-color:" + color);
})

mouseover.color

This event is triggered when the mouse moves over a color box on the palette.

JavaScript
$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').attr("style", "background-color:" + color);
})

Methods

clear()

Clears the color value (and close the popup palette if opened).

JavaScript
$("#mycolor").colorpicker("clear");

enable()

Get the currently selected color value (returned as a string).

JavaScript
$("#mycolor").colorpicker("enable");

disable()

Get the currently selected color value (returned as a string).

JavaScript
$("#mycolor").colorpicker("disable");

isDisabled()

Get the currently selected color value (returned as a string).

JavaScript
var disabled = $("#mycolor").colorpicker("isDisabled");

val([color])

Get or set the currently selected color value (as a string, i.e., "#d0d0d0").

JavaScript
var color = $("#mycolor").colorpicker("val");

$("#mycolor").colorpicker("val", "#d0d0d0");

showPalette()

Show the palette (when using the widget as a popup).

JavaScript
$("#mycolor").colorpicker("showPalette");

hidePalette()

Hide the palette (when using the widget as a popup).

JavaScript
$("#mycolor").colorpicker("hidePalette");

Theming

evol.colorpicker is as easily themeable as any jQuery UI widget, using one of the jQuery UI themes or your own custom theme made with Themeroller.

ui-lightness

ui-darkness

le-frog

Installation

Colorpicker can be downloaded or forked at GitHub.

It can also be installed from the command line using NPM.

JavaScript
npm install evol-colorpicker

or using Bower.

JavaScript
bower install evol-colorpicker

Browser Support

evol.colorpicker.js has been tested for the following browsers:

  • Internet Explorer 7+
  • Firefox 9+
  • Chrome 21+
  • Safari 5+

History

The latest code and a live demo are available at GitHub.

  • Original post on 09/03/2012
  • Version 2.0 on 01/01/2013: Added options "displayIndicator" and "history" + some bug fixes
  • Version 2.1 on 02/17/2013: Not using $.browser anymore as it is not part of jQuery 1.9
  • Version 2.2.1 on 09/07/2014: Compatibility w/ jQuery 2.x and bug fixes
  • Version 2.2.2 on 09/20/2014: Small fixes
  • Version 3.0.0 on 11/30/2014: Added option for transparent color
  • Version 3.1.0 on 12/12/2014: Added option for default color palette
  • Version 3.2.0 on 02/28/2015: Added option for color button near textbox
  • Version 3.2.2 on 08/09/2015: Added method "clear" and option "initialHistory". Also, escape key now closes the pop-up palette
  • Version 3.2.3 on 11/22/2015: Minor bug fixes
  • Version 3.4.2 on 5/12/2020: Custom Themes (contributed by Zykino) & dependencies upgrade
  • 2.3.
This article was originally posted at https://github.com/evoluteur/colorpicker

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
United States United States
I'm a UI engineer with an eye for UX and a passion for model-driven UIs.

I usually build UIs for startups in the San Francisco Bay Area.

My hobby open source project is Evolutility, a minimalist low-code platform with a model-driven UI, a model-driven backend, and a set of models to play with.

More about me on my GitHub page.

Comments and Discussions

 
AnswerWell done! Well explained! Great article! Pin
Member 150787167-Aug-22 6:16
Member 150787167-Aug-22 6:16 
GeneralRe: Well done! Well explained! Great article! Pin
Olivier_Giulieri9-Aug-22 19:47
Olivier_Giulieri9-Aug-22 19:47 
PraiseGreat Solution Pin
harisivan014-Mar-17 20:03
harisivan014-Mar-17 20:03 
QuestionAlpha slider? Pin
up_late27-Nov-15 6:09
up_late27-Nov-15 6:09 
AnswerRe: Alpha slider? Pin
Olivier_Giulieri27-Nov-15 17:01
Olivier_Giulieri27-Nov-15 17:01 
GeneralMy vote of 5 Pin
Santhakumar M23-Nov-15 2:56
professionalSanthakumar M23-Nov-15 2:56 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri27-Nov-15 18:37
Olivier_Giulieri27-Nov-15 18:37 
GeneralRe: My vote of 5 Pin
Santhakumar M29-Nov-15 7:15
professionalSanthakumar M29-Nov-15 7:15 
PraiseMy vote of 5 Pin
Liju Sankar22-Nov-15 17:56
professionalLiju Sankar22-Nov-15 17:56 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri22-Nov-15 20:23
Olivier_Giulieri22-Nov-15 20:23 
QuestionLicenses Pin
Sergey Laptik14-Aug-15 4:44
Sergey Laptik14-Aug-15 4:44 
AnswerRe: Licenses Pin
Olivier_Giulieri17-Aug-15 9:19
Olivier_Giulieri17-Aug-15 9:19 
GeneralRe: Licenses Pin
Sergey Laptik18-Aug-15 1:14
Sergey Laptik18-Aug-15 1:14 
Question5/5 Pin
Member 97921785-Sep-14 15:23
Member 97921785-Sep-14 15:23 
AnswerRe: 5/5 Pin
Olivier_Giulieri6-Sep-14 22:36
Olivier_Giulieri6-Sep-14 22:36 
GeneralMy vote of 5 Pin
Prasad Khandekar18-Apr-13 4:38
professionalPrasad Khandekar18-Apr-13 4:38 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri18-Apr-13 16:22
Olivier_Giulieri18-Apr-13 16:22 
GeneralMy vote of 5 Pin
Tejas Vaishnav9-Apr-13 19:36
professionalTejas Vaishnav9-Apr-13 19:36 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri10-Apr-13 19:17
Olivier_Giulieri10-Apr-13 19:17 
GeneralMy vote of 5 Pin
member6018-Feb-13 16:35
member6018-Feb-13 16:35 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri18-Feb-13 19:19
Olivier_Giulieri18-Feb-13 19:19 
GeneralMy vote of 5 Pin
Avik Ghosh2217-Feb-13 23:00
Avik Ghosh2217-Feb-13 23:00 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri18-Feb-13 19:19
Olivier_Giulieri18-Feb-13 19:19 
GeneralMy vote of 5 Pin
WebMaster1-Jan-13 19:07
WebMaster1-Jan-13 19:07 
GeneralRe: My vote of 5 Pin
Olivier_Giulieri1-Jan-13 22:30
Olivier_Giulieri1-Jan-13 22:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.