Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Photoshop-like jQuery Color Picker plugin with various skins and layouts, touch, and responsive.
Main contents of this wiki
- How to implement
- jQuery.fn functions
- jQuery functions
- Definitions and answers
Wcolpick stands for "Web Color Picker".
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.
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
HSB stands for
HSL stands for
Supports Alpha channel (opacity)
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
Extra Large layouts are ≃ 1.3 times the
Standard (without background), and
Full (with an opaque background), for both main-skins.
full: shows all parameters.
rgbhex: shows only R, G, B, A, Hexadecimal.
hex: shows only Hexadecimal.
without the Select button.
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.
This color picker is fully compatible with touch inputs.
Easy to implement and customize
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.