❗ ADVICE: This project has been archived and, unless further notice, will not be updated anymore.

Wcolpick

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

Features

• Photoshop-like interface.
• Supports RGB, HSB, Hexadecimal, and HSL.*
• Supports Alpha channel (opacity).
• 3 Variants: Standard, Small, and Extra Large.
• 4 Skins:
  • 2 Main-skins: Light and Dark.
  • 2 Sub-skins: Standard (without background), and Full (with an opaque background).
• 3 Layouts: Full, RGB + Hexadecimal, only Hexadecimal (each with or without the Select button).
• Compact Layout: Makes the layouts more compact, to save space.
• Responsive.
• Supports Touch.
• Easy to implement and customize.

Using the plugin

1. Clone the plugin from npm, this will also download jQuery for you.

npm i wcolpick

2. Upload the two files “wcolpick.js” and “wcolpick.css” into your hosting space (consult the documentation/guide of your host provider for more informations).

3. Include the following code in the head to enable the plugin in a web page, replacing the "..." with the paths of the files.

<link rel="stylesheet" type="text/css" href=".../wcolpick.css" />
<script type="text/javascript" src=".../wcolpick.js"></script>

4. Call the loads() function on the DOM element that will contain the plugin.

<script type="text/javascript">
jQuery(function() {
  $('#mycolorpicker').loads();
});
</script>

5. Insert the element container of the plugin wherever you want to display it.

<div id="mycolorpicker"></div>

Documentation

After cloning the project, find the "documentation.pdf" file that contains all the info about the plugin.

Requirements

This plugin requires jQuery 1.7.0 or later.
Latest version of jQuery (if you need it): https://code.jquery.com

License

Copyright (C) 2017-2020 devpelux (Salvatore Peluso)
Licensed under MIT license.
(Based on colpick by Jose Vargas')