ColoringPick – jQuery gradient color picker

#alpha#color picker#coloringPick#gradient#jquery#opacity

Turn any element into a color picker with gradient options and alpha/opacity levels.

$('.classname').coloringPick();

[adn_banner id=”140″]

Examples

Visual input field

Show the color css result

$('.classname').coloringPick({
  'show_input': true,
  'theme': 'dark'
});

Empty value

Force to open gradient picker.

$('.classname').coloringPick({
  'picker':'gradient'
});

Predefined colors

Show predefined solid color boxes for the color picker

$('.classname').coloringPick({
  'swatches':['#fff','#000','rgba(255, 36, 36, 0.75)','rgba(255, 226, 5, 0.5)','rgb(213, 255, 0)']
});

Installation

Make sure jQuery is loaded on the page and just include the two required files to activate the coloringPick instance.

  1. assets/js/jquery.coloring-pick.min.js
  2. assets/css/jquery.coloring-pick.min.css
<!DOCTYPE html>
<html>
<head>
  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
	<script src="assets/js/jquery.coloring-pick.min.js"></script>
	<link rel="stylesheet" href="assets/css/jquery.coloring-pick.min.css">
  
  	<title>ColoringPick – jQuery gradient color picker</title>
</head>
<body>
  
  	<input type="text" class="coloringpick" value="" />
  	<script>$('.coloringpick').coloringPick();</script>
  
</body>
</html>

API/Attributes

$('.coloringpick').coloringPick({
	'show_input':true,
  	'inline': false,
  	'picker': '',
    'picker_changeable': true,
  	'change': null,
  	'on_select': null,
  	'swatches': [],
    'theme': 'light',
    'picker_text': 'Color',
    'destroy': false
});

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.

$(selector).coloringPick({
  change: function(val){
    console.log(val);
  }
});

on_select

Fires when the select button is clicked.

$(selector).coloringPick({
  on_select: function(color){
    console.log(color);
  }
});