Click here to Skip to main content
11,720,324 members (82,386 online)
Click here to Skip to main content

ColorPicker - a jQuery UI Widget

, 9 Aug 2015 MIT 87.4K 3.1K 83
Rate this:
Please Sign up or sign in to vote.
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: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.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:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.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: 

<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:

<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 instanciated 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. 

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

Defaults to null.

defaultPalette (String)

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

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

Defaults to theme.

displayIndicator (Boolean)

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

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

Defaults to true.

hideButton (Boolean)

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

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

Defaults to false.

history (Boolean)

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

$("#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.

$("#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 instanciated on a textbox. 

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

Defaults to "both".

strings (String)

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

$("#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 th "transparent color". The hexadecimal value for it is "#0000ffff".

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

Defaults to false.

Events 

change.color

This event is triggered when a color is selected.

$("#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. 

$("#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).

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

enable()

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

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

disable()

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

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

isDisabled()

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

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

val([color])

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

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

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

showPalette()

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

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

hidePalette()

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

$("#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

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.

License

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

Share

About the Author

Olivier Giulieri
United States United States
I'm a UI engineer for a startup in California. What I really enjoy is to build tools to describe UI in metadata, store that metadata (outside of the code) in a database, XML or JSON, and then dynamically generate the UI at run-time based on that metadata... which I do with my open source project Evolutility.

My articles on the topic:

You may also be interested in...

Comments and Discussions

 
QuestionLicenses Pin
vladidrozd14-Aug-15 4:44
membervladidrozd14-Aug-15 4:44 
AnswerRe: Licenses Pin
Olivier Giulieri17-Aug-15 9:19
memberOlivier Giulieri17-Aug-15 9:19 
GeneralRe: Licenses Pin
Sergey Laptik18-Aug-15 1:14
memberSergey Laptik18-Aug-15 1:14 
Question5/5 Pin
Member 97921785-Sep-14 15:23
memberMember 97921785-Sep-14 15:23 
AnswerRe: 5/5 Pin
Olivier Giulieri6-Sep-14 22:36
memberOlivier Giulieri6-Sep-14 22:36 
GeneralMy vote of 5 Pin
Prasad Khandekar18-Apr-13 4:38
memberPrasad Khandekar18-Apr-13 4:38 
GeneralRe: My vote of 5 Pin
Olivier Giulieri18-Apr-13 16:22
memberOlivier Giulieri18-Apr-13 16:22 
GeneralMy vote of 5 Pin
Tejas Vaishnav9-Apr-13 19:36
memberTejas Vaishnav9-Apr-13 19:36 
GeneralRe: My vote of 5 Pin
Olivier Giulieri10-Apr-13 19:17
memberOlivier Giulieri10-Apr-13 19:17 
GeneralMy vote of 5 Pin
member6018-Feb-13 16:35
membermember6018-Feb-13 16:35 
GeneralRe: My vote of 5 Pin
Olivier Giulieri18-Feb-13 19:19
memberOlivier Giulieri18-Feb-13 19:19 
GeneralMy vote of 5 Pin
Avik Ghosh2217-Feb-13 23:00
memberAvik Ghosh2217-Feb-13 23:00 
GeneralRe: My vote of 5 Pin
Olivier Giulieri18-Feb-13 19:19
memberOlivier Giulieri18-Feb-13 19:19 
GeneralMy vote of 5 Pin
Phat (Phillip) H. VU1-Jan-13 19:07
memberPhat (Phillip) H. VU1-Jan-13 19:07 
GeneralRe: My vote of 5 Pin
Olivier Giulieri1-Jan-13 22:30
memberOlivier Giulieri1-Jan-13 22:30 
GeneralMy vote of 5 Pin
Savalia Manoj M1-Jan-13 17:04
memberSavalia Manoj M1-Jan-13 17:04 
GeneralRe: My vote of 5 Pin
Olivier Giulieri1-Jan-13 17:37
memberOlivier Giulieri1-Jan-13 17:37 
QuestionJQUI noob question Pin
jimbob5421-Dec-12 20:15
memberjimbob5421-Dec-12 20:15 
SuggestionShow Rgb() Unit On IE9 Pin
kmn.patient18-Dec-12 20:01
memberkmn.patient18-Dec-12 20:01 
AnswerRe: Show Rgb() Unit On IE9 Pin
Olivier Giulieri18-Dec-12 21:39
memberOlivier Giulieri18-Dec-12 21:39 
Suggestionmouseover Pin
Member 964164929-Nov-12 7:10
memberMember 964164929-Nov-12 7:10 
GeneralRe: mouseover Pin
Olivier Giulieri29-Nov-12 20:35
memberOlivier Giulieri29-Nov-12 20:35 
Questionmouseleave Pin
Member 959498814-Nov-12 2:07
memberMember 959498814-Nov-12 2:07 
AnswerRe: mouseleave Pin
Olivier Giulieri14-Nov-12 16:43
memberOlivier Giulieri14-Nov-12 16:43 
GeneralRe: mouseleave Pin
Member 959498814-Nov-12 22:38
memberMember 959498814-Nov-12 22:38 
Oh, thanks for the reply. I put the code here but the event seems to work when mouse leaves the textbox, not the color. Is it me?



}
          }).on("mouseover", "td", function(b) {
              if (c._enabled) {
                  var d = a(this).attr("style").substring(17);
                  c._setColorInd(d, 2);
                  c.element.trigger("mouseover.color", d)
              }
          }).on('mouseleave', 'td', function(evt) {
              if (that._enabled) {
                  that.element.trigger('mouseleave.color');
              }
          })
      }, val: function(a) {
          if (typeof a == "undefined") { return this.options.color } else {

AnswerRe: mouseleave Pin
Olivier Giulieri4-Dec-12 20:00
memberOlivier Giulieri4-Dec-12 20:00 
GeneralMy vote of 5 Pin
sandeep nagabhairava13-Nov-12 22:00
membersandeep nagabhairava13-Nov-12 22:00 
GeneralRe: My vote of 5 Pin
Olivier Giulieri14-Nov-12 16:44
memberOlivier Giulieri14-Nov-12 16:44 
QuestionHow to i get the screenshot2 type color picker? Pin
yakirmanor11-Nov-12 23:36
memberyakirmanor11-Nov-12 23:36 
AnswerRe: How to i get the screenshot2 type color picker? Pin
Olivier Giulieri12-Nov-12 16:13
memberOlivier Giulieri12-Nov-12 16:13 
QuestionLooks good but... Pin
tschlarm130-Oct-12 12:00
membertschlarm130-Oct-12 12:00 
AnswerRe: Looks good but... Pin
Olivier Giulieri30-Oct-12 20:17
memberOlivier Giulieri30-Oct-12 20:17 
GeneralMy vote of 5 Pin
jayantbramhankar12-Oct-12 21:31
memberjayantbramhankar12-Oct-12 21:31 
GeneralRe: My vote of 5 Pin
Olivier Giulieri13-Oct-12 13:13
memberOlivier Giulieri13-Oct-12 13:13 
GeneralMy vote of 5 Pin
Prasyee10-Oct-12 19:09
memberPrasyee10-Oct-12 19:09 
GeneralRe: My vote of 5 Pin
Olivier Giulieri11-Oct-12 18:07
memberOlivier Giulieri11-Oct-12 18:07 
QuestionMultiple post Pin
locklems9016-Sep-12 17:51
memberlocklems9016-Sep-12 17:51 
AnswerRe: Multiple post Pin
Olivier Giulieri16-Sep-12 18:59
memberOlivier Giulieri16-Sep-12 18:59 
GeneralMy vote of 5 Pin
Rui Jarimba10-Sep-12 0:15
memberRui Jarimba10-Sep-12 0:15 
GeneralRe: My vote of 5 Pin
Olivier Giulieri10-Sep-12 17:05
memberOlivier Giulieri10-Sep-12 17:05 
GeneralMy vote of 5 Pin
Monjurul Habib5-Sep-12 18:43
memberMonjurul Habib5-Sep-12 18:43 
GeneralRe: My vote of 5 Pin
Olivier Giulieri5-Sep-12 20:08
memberOlivier Giulieri5-Sep-12 20:08 
GeneralMy vote of 4 Pin
Slacker0073-Sep-12 23:48
memberSlacker0073-Sep-12 23:48 
GeneralRe: My vote of 4 Pin
Olivier Giulieri5-Sep-12 20:09
memberOlivier Giulieri5-Sep-12 20:09 
GeneralRe: My vote of 4 Pin
Slacker0075-Sep-12 22:11
memberSlacker0075-Sep-12 22:11 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 9 Aug 2015
Article Copyright 2012 by Olivier Giulieri
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid