❗ 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
- Clone the plugin from npm, this will also download jQuery for you.
npm i wcolpick
-
Upload the two files “wcolpick.js” and “wcolpick.css” into your hosting space (consult the documentation/guide of your host provider for more informations).
-
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>
- Call the
loads()
function on the DOM element that will contain the plugin.
<script type="text/javascript">
jQuery(function() {
$('#mycolorpicker').loads();
});
</script>
- 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')