Click here to Skip to main content
15,867,686 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.6K   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 
Hi,

To be honest, I didn't have the need for it so I didn't even think about it.

It is a nice feature to have for advanced users but most users may not need it and it would add complexity... I'll keep it simple and easy to use for now.

The code is open source so you can make a fork with the feature if you want.

Thanks for your feedback.
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.