Click here to Skip to main content
11,584,288 members (46,161 online)
Click here to Skip to main content

ColorPicker - a jQuery UI Widget

, 28 Feb 2015 MIT 80.7K 3K 81
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.

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

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.

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

 
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 
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 
Thank you.
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.150603.1 | Last Updated 28 Feb 2015
Article Copyright 2012 by Olivier Giulieri
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid