Turn any element into a color picker with gradient options and alpha/opacity levels.
ColoringPick – jQuery gradient color picker
Examples
Visual input field
Show the color css result
Empty value
Force to open gradient picker.
Predefined colors
Show predefined solid color boxes for the color picker
Installation
Make sure jQuery is loaded on the page and just include the two required files to activate the coloringPick instance.
- assets/js/jquery.coloring-pick.min.js
- assets/css/jquery.coloring-pick.min.css
API/Attributes
show_input
Show the input field containing the color value. default: false
inline
Force the color picker to appear inline. default: false
picker
Force the color picker to open in a specific state (solid|gradient). default: ”
picker_changeable
Allow changing color picker between solid and gradient colors. default: true
change
Function to fire when the color picker value changes. default: null. see events for more info
on_select
Function to fire when the select button is clicked. returns the color string. default: null.
swatches
An array containing predefined colors, in either rgb(a) or hex format, that will show up under the main color grid.
theme
The theme for the color picker window (light|dark). default: light
picker_text
The text shown on the frontend picker element. default: Color
destroy
Destroy the color picker element. default: false
Events
change
Fires when the value of the color picker changes. Note! This event will fire a lot when the user drags the color picker around.
on_select
Fires when the select button is clicked.