Click here to Skip to main content
Click here to Skip to main content
Go to top

ColorPicker - a jQuery UI Widget

, 6 Sep 2014
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/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 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). 

    $("#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");<span style="color: rgb(17, 17, 17); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px;"> </span>

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.

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 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... which I do with Evolutility.
 
Articles on Evolutility:

Comments and Discussions

 
AnswerRe: Multiple post PinmemberOlivier Giulieri16-Sep-12 18:59 
GeneralMy vote of 5 PinmemberRui Jarimba10-Sep-12 0:15 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri10-Sep-12 17:05 
GeneralMy vote of 5 PinmemberMonjurul Habib5-Sep-12 18:43 
GeneralRe: My vote of 5 PinmemberOlivier Giulieri5-Sep-12 20:08 
GeneralMy vote of 4 PinmemberSlacker0073-Sep-12 23:48 
GeneralRe: My vote of 4 PinmemberOlivier Giulieri5-Sep-12 20:09 
GeneralRe: My vote of 4 PinmemberSlacker0075-Sep-12 22:11 
Olivier Giulieri wrote:
but what was missing to deserve a 5?

I voted a 4 because your article was not worthy of a 5, in my opinion.
 
I did like it and I thanked you for sharing it with the community.

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
Web03 | 2.8.140926.1 | Last Updated 7 Sep 2014
Article Copyright 2012 by Olivier Giulieri
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid