Salvatore Peluso edited this page Mar 5, 2018 · 26 revisions


Photoshop-like jQuery Color Picker plugin with various skins and layouts, touch, and responsive.

Main contents of this wiki

  1. Description
  2. Features
  3. How to implement
  4. Attributes
  5. Events
  6. jQuery.fn functions
  7. jQuery functions
  8. Definitions and answers
  9. Examples
  10. Changelog

Extra contents

  1. About the Color Spaces


Wcolpick stands for "Web Color Picker".
This is a Javascript jQuery based color picker plugin.
Is developed to be used on all websites that need an easy and intuitive color picker, and is totally open source.
You can use this color picker as an input color window, to allow the user to select a color (then you can use the chosen color as you want), or you can simply display it on a web page without do nothing with it.

This is an evolved version of the same, fantastic, plugin developed by Jose Vargas: colpick Color Picker.
I removed the main lack, the alpha channel, added various new features, resolved several bugs, and restyled the plugin with a new design inspired to Google Material Design.
I kept the internal collaudated logic, and all its strengths, like the backwards compatibility with older browsers.


Photoshop-like interface
The interface of this plugin is designed to work like the Photoshop's color picker (in Hue mode).

Supports RGB, HSB, Hexadecimal, and HSL (see n1)
RGB stands for Red, Green, Blue.
HSB stands for Hue, Saturation, Brightness.
HSL stands for Hue, Saturation, Lightness.

Supports Alpha channel (opacity)
The Alpha channel is a value between 0 to 1 (represented by a percent value between 0 to 100), that represents the opacity of the color (0 means transparent, and 1 means full opacity).

3 Variants: Standard, Small, and Extra Large
Standard is the default layout variant.
Small layouts are ≃ 0.7 times the Standard layouts.
Extra Large layouts are ≃ 1.3 times the Standard layouts.

4 Skins
2 Main-skins: Light and Dark.
2 Sub-skins: Standard (without background), and Full (with an opaque background), for both main-skins.

3 Layouts
full: shows all parameters.
rgbhex: shows only R, G, B, A, Hexadecimal.
hex: shows only Hexadecimal.
Each with or without the Select button.

Compact Layout
Makes the layouts more compact, to save space.
(The images above use the compact layout)

It will adapt to screen size: for Smartphones and Tablets will be used the Compact Layout.

Supports Touch
This color picker is fully compatible with touch inputs.

Easy to implement and customize
If you know CSS (and Javascript), you can easy customize the layouts and the behaviour as you want.
Remember that this plugin is totally open source!
PS. If you found a bug, create a new issue (or make a pull request if you resolved it).


n1: The plugin supports input/output of HSL colors, but there are no fields for choosing an HSL color.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.