Click here to Skip to main content
Click here to Skip to main content

ColorPicker - a jQuery UI Widget

By , 17 Feb 2013
Rate this:
Please Sign up or sign in to vote.

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/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/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.8.18/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 several options to customize its behavior:  

color (String)

Used to set the default color value. 

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

Defaults to null.  

displayIndicator (Boolean)

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

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

Defaults to *true*.  

history (Boolean)

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

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

Defaults to *true*.   

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,More Colors,Less Colors".  

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 mouves over a color box on the palette. 

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

Methods 

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

    $("#mycolor").colorpicker("isDisabled");
val([color])

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

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

  • Original post on 9/3/2012. 
  • evol.colorpicker 2.0 on 1/1/2013: Added options "displayIndicator" and "history" + some bug fixes. 
  • evol.colorpicker 2.1 on 2/17/2013: Not using $.browser anymore as it is not part of jQuery 1.9.  

 The project and a live demo are hosted on GitHub

License

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

About the Author

Olivier Giulieri

United States United States
I'm a software engineer living in California. I like to work on UI and databases. What I really enjoy is to describe UI in metadata, store that metadata (outside of the code) in a database or in XML, and then dynamically generate screens at run-time... which I do with my open source Evolutility.
 
Articles on Evolutility:
 
Beside Evolutility.org, my other creative project is ChakraDesign.com.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberPrasad Khandekar18-Apr-13 4:38 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri18-Apr-13 16:22 
GeneralMy vote of 5 PinmemberTejas Vaishnav9-Apr-13 19:36 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri10-Apr-13 19:17 
GeneralMy vote of 5 Pinmembermember6018-Feb-13 16:35 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri18-Feb-13 19:19 
GeneralMy vote of 5 PinmemberAvik Ghosh2217-Feb-13 23:00 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri18-Feb-13 19:19 
GeneralMy vote of 5 PinmemberPhat (Phillip) H. VU1-Jan-13 19:07 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri1-Jan-13 22:30 
GeneralMy vote of 5 PinmemberSavalia Manoj M1-Jan-13 17:04 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri1-Jan-13 17:37 
QuestionJQUI noob question Pinmemberjimbob5421-Dec-12 20:15 
SuggestionShow Rgb() Unit On IE9 Pinmemberkmn.patient18-Dec-12 20:01 
AnswerRe: Show Rgb() Unit On IE9 PinmemberOlivier Giulieri18-Dec-12 21:39 
Suggestionmouseover PinmemberMember 964164929-Nov-12 7:10 
GeneralRe: mouseover PinmemberOlivier Giulieri29-Nov-12 20:35 
Questionmouseleave PinmemberMember 959498814-Nov-12 2:07 
AnswerRe: mouseleave PinmemberOlivier Giulieri14-Nov-12 16:43 
GeneralRe: mouseleave PinmemberMember 959498814-Nov-12 22:38 
AnswerRe: mouseleave PinmemberOlivier Giulieri4-Dec-12 20:00 
GeneralMy vote of 5 Pinmembersandeep nagabhairava13-Nov-12 22:00 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri14-Nov-12 16:44 
QuestionHow to i get the screenshot2 type color picker? Pinmemberyakirmanor11-Nov-12 23:36 
AnswerRe: How to i get the screenshot2 type color picker? PinmemberOlivier Giulieri12-Nov-12 16:13 

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 | Mobile
Web02 | 2.8.140415.2 | Last Updated 17 Feb 2013
Article Copyright 2012 by Olivier Giulieri
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid