Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
jquery-colpick
Advanced tools
Readme
colpick is a simple Photoshop-style color picker jQuery plugin. Its interface is familiar for most users and it's also very lightweight loading less than 30 KB to the browser.
Add colpick to your project using your the tool of you choice or download the files.
bower install jquery-colpick --save
npm install jquery-colpick --save
Include colpick.js
and colpick.css
to into your application. Make sure you have included jQuery (v1.7.0+) as well.
<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
Require the module in your application. Don't forget to include the css file as well.
require('jquery-colpick');
Now you may call the colpick method on any jQuery object to create a color picker. By default you get a dropdown color picker.
<button id="colorpicker">Show Color Picker</button>
$('#colorpicker').colpick();
For more examples see Usage examples.
##Options##
Option | Type | Description |
---|---|---|
flat | boolean | Flat mode just displays the color picker in place, always visible, with no show/hide behavior. Use it with colpickShow() and colpickHide() to define your own show/hide behavior or if you want the picker to be always visible. Default: false |
layout | string | Name of the color picker layout to use. Posible values are 'full' (RGB, HEX, and HSB fields), 'rgbhex' (no HSB fields) and hex (no HSB, no RGB). You can see the full layout at the top of the page. rgbhex and hex layouts are shown in the examples below. Default: 'full' |
submit | boolean | If false the picker has no submit or OK button and no previous color viewer. If false use onChange function to get the picked color. Default: true |
colorScheme | string | The color scheme to use for the picker, 'light' or 'dark'. Default: 'light' |
submitText | string | The text to show on the submit button if active. Default: 'OK' |
color | string or object | Default color. Hex string (eg. 'ff0000') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:0, s:100, b:100}). String 'auto' to read color from the element's value attribute. Default: 'auto' |
showEvent | string | Event that shows the color picker. Default: 'click' |
livePreview | boolean | If true color values change live while the user moves a selector or types in a field. Turn it off to improve speed. Default: true |
polyfill | boolean or function | If true, the color picker is only activated when no native browser behavior is available. Use a function (should receive a colorpicker DOM object) to determine the option dynamically (e.g. by user-agent). Default: false |
appendTo | DOM element |
Append the picker to the specified DOM element. Defaults:
|
style | object | Set additional styles to the picker. Will accept any object that could be passed to jQuery's .css method. Default: null |
onBeforeShow | function | Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object. |
onShow | function | Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object. |
onHide | function | Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object. |
onChange | function | Callback function triggered when the color is changed. This is the function that allows you to get the color picked by the user whenever it changes, whithout the user pressing the OK button. Should receive:
|
onSubmit | function | Callback function triggered when the color is chosen by the user, using the OK button. Should receive exactly the same as onChange. It's never fired if using submit:0 option. |
##jQuery.fn Functions##
Function | Description |
---|---|
colpick(options) | The main function used to create a color picker. |
colpickHide() | Hides the color picker. Accepts no arguments. Use it to hide the picker with an external trigger. |
colpickShow() | Shows the color picker. Accepts no arguments. Use it to show the picker with an external trigger. |
colpickSetColor(col,setCurrent) | Use it to set the picker color. The onChange callback is fired with bySetColor set to true. Parameters:
|
##jQuery Functions##
Function | Description |
---|---|
$.colpick.rgbToHex(rgb) | Receives an object like {r:255, g:0, b:0} and returns the corresponding HEX string (with no #). |
$.colpick.rgbToHsb(rgb) | Receives an object like {r:255, g:0, b:0} and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range. |
$.colpick.hsbToHex(hsb) | Receives an object like {h:0, s:100, b:100} and returns the corresponding HEX string (with no #). |
$.colpick.hsbToRgb(hsb) | Receives an object like {h:0, s:100, b:100} and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range. |
$.colpick.hexToHsb(hex) | Receives a hex string with no # and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range. |
$.colpick.hexToRgb(hex) | Receives a hex string with no # and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range. |
##Layouts##
Layout | Image |
---|---|
full: | |
rgbhex: | |
hex: |
##Changes to josedvq's version##
Dual licensed under the MIT and GPLv2 licenses.
Fork of josedvq's colpick
Based on Stefan Petre's color picker
FAQs
Simple lightweight Photoshop-like color picker with touch support.
The npm package jquery-colpick receives a total of 772 weekly downloads. As such, jquery-colpick popularity was classified as not popular.
We found that jquery-colpick demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.