Advanced & beautiful html5 / javascript color picker

Basic Usage:

1. Load the latest version of  jQuery library on your web page


<script src="jquery.min.js"></script>

2. Download and include jQuery Wheel Color Picker files on the page

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

3. There are two ways to initialize color picker. One is by adding «data-wheelcolorpicker» attribute to the input element. 

<input type="text" id="demo" data-wheelcolorpicker>

4. The other way is by invoking $(element).wheelColorPicker() jQuery function.

$(function() {
$('#demo').wheelColorPicker();
});

5. Default plugin options.

// String Color naming style. Set colorToRgb for all available formats.
format: 'hex', 

// Enable dynamic slider gradients.
preview: false,

// Enable live color preview on input field
live: true,

// Enable picking color by typing directly
userinput: true,

// Automatically resize container width.
autoResize: true,

// Automatically convert input value to specified format.
autoFormat: true,

// Preserve color wheel shade when slider position changes. 
// If set to true, changing color wheel from black will reset selectedColor.val 
preserveWheel: null,

// CSS Classes to be added to the color picker.
cssClass: '',

//  Layout mode.
layout: 'popup',

// Number Duration for transitions such as fade-in and fade-out.
animDuration: 200,

// Rendering details quality. The normal quality is 1. 
// Setting less than 0.1 may make the sliders ugly, while setting the value too high might affect performance.
quality: 1,

// tring combination of sliders. If null then the color picker will show default values, which is "wvp" for normal color or "wvap" for color with alpha value. 
// Possible combinations are "whsvrgbap". 
// Note that the order of letters affects the slider positions.
sliders: null, 

// Round the alpha value to N decimal digits.
// Set -1 to disable rounding.
rounding: 2,

// Display mobile-friendly layout when opened in mobile device.
mobile: true, 

// Max screen width to use mobile layout instead of default one.
mobileWidth: 480,

// Boolean Keep input blurred to avoid on screen keyboard appearing. 
// If this is set to true, avoid assigning handler to blur event.
hideKeyboard: true,

// Load options from HTML attributes. 
// To set options using HTML attributes, prefix these options with 'data-wcp-' as attribute names.
htmlOptions: true,

// Snap color wheel and slider on 0, 0.5, and 1.0
snap: false, 

// Snap if slider position falls within defined tolerance value.
snapTolerance: 0.05

6. Public methods.

// set color value
$(elm).wheelColorPicker('color', '#ff0000');

// get color value
var color = $(elm).wheelColorPicker('color');
// or
var color = $(elm).wheelColorPicker('getValue');

// set alpha value
$(elm).wheelColorPicker('alpha', .5);

// get alpha value
var alpha = $(elm).wheelColorPicker('getAlpha');

7. Event handlers.

// triggered on change
$('#demo').on('change', function(e){
  // do something
});

// triggered on color change
$('#demo').on('colorchange', function(e){
  // do something
});

// triggered on focus
$('#demo').on('focus', function(e){
  // do something
});

// triggered on focus
$('#demo').on('focus', function(e){
  // do something
});

// triggered on blur
$('#demo').on('blur', function(e){
  // do something
});

// triggered when the user presses mouse down
$('#demo').on('sliderdown', function(e){
  // do something
});

// triggered when the user presses mouse up
$('#demo').on('sliderup', function(e){
  // do something
});

// triggered when the user moves a slider
$('#demo').on('slidermove', function(e){
  // do something
});

Implement

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

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

All you have to do is to select the elements in a jQuery way and call the plugin.

 $('input').ColorPicker(options);
                

Options

A hash of parameters. All parameters are optional.

eventName string The desired event to trigger the colorpicker. Default: ‘click’
color string or hash The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: ‘ff0000’
flat boolean Whatever if the color picker is appended to the element or triggered by an event. Default false
livePreview boolean Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true
onShow function Callback function triggered when the color picker is shown
onBeforeShow function Callback function triggered before the color picker is shown
onHide function Callback function triggered when the color picker is hidden
onChange function Callback function triggered when the color is changed
onSubmit function Callback function triggered when the color it is chosen

Set color

If you want to set a new color.

$('input').ColorPickerSetColor(color);

The ‘color’ argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).

Basic usage:

1. Place the color-picker.css and color-picker.js into your html document.

<link href="color-picker.min.css" rel="stylesheet">
<script src="color-picker.min.js"></script>

2. Create a text field to accept the selected color values. Optionally, you can define the initial color code in the attribute as follows:

<input type="text" value="#ff0" />

3. Initialize the color picker on the text field.

var picker = new CP(document.querySelector('input'));

4. Auto-update the background color of your web page when the color changes.

function onChange(r, g, b, a) {
  this.source.value = this.color(r, g, b, a);
  document.body.style.backgroundColor = this.color(r, g, b, a);
}
picker.on('change', onChange);

5. Optional settings.

var picker = new CP(document.querySelector('input'), {
    color: 'HEX', // color format
    e: , // events to show the color picker 
    parent: null //parent element
});

6. API methods and properties.

// returns the version
CP.version

// returns the instance
CP.instances

// converts between HEX and RGBa
CP.HEX('#ff0');
CP.HEX();
CP.RGB = function(x) {
  if ('string' === typeof x) {
    // Use regular expression here to extract color data from the string input
    // and output it as an array of red, green, blue and alpha color data
    return ;
  }
  // Return the string representation of color if input is an array of color data
  return 'rgba(' + x + ', ' + x + ', ' + x + ', ' + x + ')';
};
console.log(CP.RGB('rgba(255, 255, 0, 1)'));
console.log(CP.RGB());

// returns the current state
picker.state

// returns the source element that holds the initial color value
picker.source

// returns the color picker element
picker.self.style.borderWidth = '4px';

// returns the active color picker control pane element
picker.current

// checks if is visible
picker.visible

// sets color
picker.set(r, g, b, a);

// gets the current color
picker.get();

// sets value and update the color picker's color state.
picker.value(r, g, b, a);

// calls current color parser function with a name that is defined in the state.color value.
picker.color(r, g, b, a);

// shows/hides the color picker
picker.enter(); 
picker.exit();

// repositions the color picker
picker.fit();

// removes custom color picker features from the source element.
picker.pop();

7. Event handlers.

  • enter
  • exit
  • fit
  • change
  • start
  • drag
  • stop
  • pop
picker.on(eventName, function(parameter) {
  // do something
});
picker.off(eventName, function(parameter) {
  // do something
});
picker.fire(eventName, lot);

Iro.js : HSV color picker widget for JavaScript

March 12, 2019 | Core Java Script

Iro.js is a HSV color picker widget for JavaScript with a modern, SVG-based user interface.

Features:

  • Simple: Low friction API, with robust support for hex, rgb, hsl and hsv color formats.
  • Extendable: Tweak the library to your requirements with Plugins and custom UI elements
  • Consistent behaviour: Works across all modern browsers and devices, including touchscreens.
  • Small footprint: 7kb minified and gzipped, with absolutely no jQuery or extra css/images in sight.
  • Great design: The controls are designed to be intuitive and responsive, plus they’re built with SVG so they look super crisp at any resolution.
  • Transparency support: Optional transparency slider with the transparency plugin.

Basic usage:

Load the minified version of the HTML5 Color Picker in the document.

<script src="html5kellycolorpicker.min.js"></script>

Create an html5 canvas element on the webpage.

<canvas id="picker"></canvas>

Attach the HTML5 color picker to an input field.

<input id="color" value="#54aedb">

Initialize the HTML5 color picker and done.

new KellyColorPicker({
    place : 'picker', 
    input : 'color'
});

More configurations to customize the color picker.

new KellyColorPicker({

    // canvas size  
    size: 200, 

    // initial color
    color: '#ffffff',

    // or 'quad'
    method: 'triangle',

    // applies theselected color to the background of the input
    inputColor: true,

    // hex or rgba or mixed
    inputFormat: 'mixed',

    // from 0 to 1
    alpha: 1,

    // shows alpha slider
    alphaSlider: false,

    // auto re-init on window resize
    resizeWith: true

});

Event handlers.

new KellyColorPicker({

    userEvents: {
      updateinput : function(handler, input, manualEnter) {},
      change : function(handler) {}, 
      mousemoveh : function(event, handler, dot) {}, 
      mouseuph : function(event, handler, dot) {}, 
      mousemovesv : function(event, handler, dot) {}, 
      mouseupsv : function(event, handler, dot) {}, 
      mousemoverest : function(event, handler, dot) {}, 
      mouseupalpha : function(event, handler, dot) {}, 
      mousemovealpha : function(event, handler, dot) {}, 
      setmethod : function (handler, newMethod) {},
      selectcolorsaver : function (handler, colorSaverObj) {},
    }

});

API Methods.

instance.setColorByHex(hex)
instance.setColor(color)
instance.setColorForColorSaver(color, side)
instance.setColorSaver(side) // side - "left" or "right"
instance.getColorSaver(side)
instance.addUserEvent(eventKey, event)
instance.removeUserEvent(eventKey)
instance.getCanvas()
instance.getCtx()
instance.getInput()
instance.getSvFig()
instance.getSvFigCursor()
instance.getWheel()
instance.getWheelCursor()
instance.getCurColorHsv()
instance.getCurColorRgb()
instance.getCurColorHex()
.instance.getCurColorRgba()
instance.getCurAlpha
instance.setAlpha(newAlpha)
instance.updateView(dropBuffer)
instance.resize(newSize)
instance.destroy()

Settings

Option Description
This is the initial color if there is no valid (any CSS formatted) color value on the connected input element. Can be in any format that Tiny Color supports.
This is the color format on the preview slider (if visible). Can be , or . Note that hex format can not represent the opacity value.
: Makes the input readonly to prevent touch keyboard to show up on focus, needs a second click to become editable.
: Array of CSS colors (can be CSS color names as well).: The swatches are disabled.
: Name of the custom swatches group. Color pickers with the same name share the same swatch colors, so if you add a new color to one of the color pickers, then all the color pickers swatches will be updated on the page which has the same name.: The custom swatches are disabled, so only the predefined swatches can be used.
: The connected input elements value will be automatically updated in sync with the color picker. The color format which the color is represented i the input can be set via the property. It can be any of , or . If it is hex, then the opacity will be discarded.
: The color picker is rendered in a popup, which is shown on focus of the connected element.: The color picker is rendered right after the connected element, and is always visible.
: The popup will be visible on blu or on click.: No popup shown on blur or on click. Must trigger and events to show/hide the popup.
Update interval of the sliders while dragging (ms). The default is 30.
: Preview of the color on the connected element’s background.: No preview on the connected element.
: If is enabled, then if the lightness is below of this value, the element’s text color will be white. Otherwise the text is black.
: Unconvertable CIE colors are marked with an exclamation mark on the CIE sliders level marker.: No exclamation mark on the markers.
: Opacity of the invalid (unconvertable) area of the CIE sliders.
: Sharper, more accurate edges of the valid CIE ranges on the sliders.: Smoother edges of the valid CIE ranges on the sliders.
An object which defines which sliders appear and in which order. Possible properties: , , , , .
An object which defines the labels of the sliders. Possible properties: , , , , , , , , , , .
: This function is triggered when the color is changed with the sliders or via a connected input. The parameter holds the actual color object in the following formats: rgb object, hsl object, cie lch object, Tiny Color object.
: Title of the add color to swatches button.
: Title of the reset swatches button.

Basic Usage:

1. Include jQuery library and jQuery Color Picker Sliders on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
<link href="jquery-colorpickersliders/jquery.colorpickersliders.css" rel="stylesheet" type="text/css" media="all">

2. Include other necessary javascript files on the web page

<script src="libraries/jquery.hammer.js"></script>
<script src="libraries/tinycolor.js"></script>

3. Create a input field that popups a color picker interface when focused on

<input id="color" type="text" class="demo-popup" value="#56B29A" data-color-format="hex">

4. Call the plugin

$('.demo-popup').ColorPickerSliders({
    previewontriggerelement: true,
    flat: false,
    color: '#cf966f',
    order: {
        rgb: 1,
        preview: 2
    }
});

5. Settings

  • color — This is the initial color if there is no valid (any CSS formatted) color value on the connected input element. Can be in any format that Tiny Color supports.
  • connectedinput — selector or jQuery object: The connected input elements value will be automatically updated in sync with the color picker. The color format which the color is represented i the input can be set via the data-color-format property. It can be any of hex, hsl or rgb. If it is hex, then the opacity will be discarded.
  • flat — false: The color picker is rendered in a popup, which is shown on focus of the connected element. true: The color picker is rendered right after the connected element, and is always visible.
  • previewontriggerelement — true: Preview of the color on the connected element’s background. false: No preview on the connected element.
  • previewcontrasttreshold — 30: If previewontriggerelement is enabled, then if the lightness is below of this value, the element’s text color will be white. Otherwise the text is black.
  • erroneousciecolormarkers — true: Unconvertable CIE colors are marked with an exclamation mark on the CIE sliders level marker. false: No exclamation mark on the markers.
  • invalidcolorsopacity — 1: Opacity of the invalid (unconvertable) area of the CIE sliders.
  • finercierangeedges — true: Sharper, more accurate edges of the valid CIE ranges on the sliders. false: Smoother edges of the valid CIE ranges on the sliders.
  • onchange — function(container, color): This function is triggered when the color is changed with the sliders or via a connected input. The color parameter holds the actual color object in the following formats: rgb object, hsl object, cie lch object, Tiny Color object.

jQuery Color Picker Plugins:

jQuery Colorpicker Plugin For Bootstrap

Colorpicker Plugin For Bootstrap 4 and Bootstrap 3 frameworks that allow you to add a color picker to an input field field or to any other element with multiple formats: hex, rgb, rgba, hsl, hsla.

Beautiful jQuery Color Picker For Bootstrap — Pick-a-Color

Pick-a-Color is a cool and easy-to-use jQuery plugin that helps you create beautiful and powerful color picker using Twitter’s bootstrap framework.

Simple Color Picker For Bootstrap 4 — colorPalettePicker.js

The colorPalettePicker.js jQuery plugin makes uses of Bootstrap 4 dropdown component to create a simple color picker on your web app.

Flat HTML5 Palette Color Picker For jQuery — colorPick.js

colorPick.js is a simple, plain, flat style jQuery color picker plugin which allows the user to select colors from a predefined palette with support for recent selected colors.

About

A simple component to select color in the same way you select color in Adobe Photoshop

Features

  • Flat mode — as element in page
  • Powerful controls for color selection
  • Easy to customize the look by changing some images
  • Fits into the viewport

Examples

Flat mode.

$('#colorpickerHolder').ColorPicker({flat: true});
                

Custom skin and using flat mode to display the color picker in a custom widget.

Attached to an text field and using callback functions to update the color with field’s value and set the value back in the field by submiting the color.

$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});

Attached to DOMElement and using callbacks to live preview the color and adding animation.

Changelog:

v3.0.9 (2019-12-05)

FIX: popup not closing/showing when clicking on non-control

v3.0.8 (2019-06-12)

  • FIX: Page scrolling when dragging sliders on touch devices
  • FIX: colorchange not firing when alpha slider is moved

v3.0.7 (2019-05-09)

  • Fixed Slider cursors not correctly positioned when popup is shown
  • Fixed  Page scrolling when dragging sliders on touch devices
  • Added colorchange event that fires when color value changes
  • Doc updated.

v3.0.5 (2018-02-10)

files cleanup + prepare for 3.0.5 release

v3.0.3 (2017-07-28)

Code refactor

v3.0.1 (2017-07-28)

  • only update value when value is changed.
  • Fixed wheel size on mobile browser

v3 beta (2016-01-28)

  • Code refactor
  • Options for sliders arrangement
  • Programmatically resizeable color picker
  • External images no longer required

v2.5.1 (2016-01-05)

Added support forfirefox 3.6

v2.5.0 (2016-01-03)

Added snap option

v2.4.5 (2015-10-16)

Hide keyboard implementation

v2.4.1 (2015-10-15)


Added touch support

v2.3.1 (2015-10-13)

  • Allow initializations using HTML attributes.
  • New examples.

v2.2.0 (2013-12-19)

  • Added example file for demonstrating events
  • Added events: sliderdown, sliderup, slidermove, focus, blur
  • Prev: Simple jQuery Plugin For Customizable Weather Widget — MetCast
  • Next: jQuery Delayed Image Loading Plugin — lazy.js

Let’s see some different color pickers in action

HSL Color Picker

The following demo uses the HSL sliders with preview.

        <span class="hsl-demo"></span>

        $(".hsl-demo").ColorPickerSliders({
            flat: true,
            previewformat: 'hsl',
            order: {
                hsl: 1,
                preview: 2
            }
        });

CIE Lch Color Picker with human perceived lightness

The following demo uses the CIE Lch sliders with human perceived lightness. It uses a different name and different default , so the swatches are independent from the other color pickers on this page.

        <span class="cielch-demo"></span>

        $(".cielch-demo").ColorPickerSliders({
            flat: true,
            customswatches: "different-swatches-groupname",
            swatches: ,
            order: {
                cie: 1,
                preview: 2
            }
        });

RGB Color Picker

The following demo uses the RGB and opacity sliders. The swatches are disabled for this color picker.

        <span class="rgb-demo"></span>

        $(".rgb-demo").ColorPickerSliders({
            flat: true,
            swatches: false,
            order: {
                rgb: 1,
                opacity: 2
            },
            labels: {
                rgbred: 'Red',
                rgbgreen: 'Green',
                rgbblue: 'Blue'
            }
        });

Popup on any element

The following example is linked to different elements and rendered in popups. Only the cutom swatches are disabled for this demo, so you can use the predefined swatches.

        <input id="color" type="text" class="demo-popup" value="#56B29A" data-color-format="hex">
        <button type="button" class="demo-popup">button</button>
        <span class="demo-popup">span</span>
        <a class="demo-popup">link</a>

        $('.demo-popup').ColorPickerSliders({
            previewontriggerelement: true,
            flat: false,
            color: '#cf966f',
            customswatches: false,
            swatches: ,
            order: {
                rgb: 1,
                preview: 2
            }
        });

Example for using the setting

this span is updated on change

        <input type="text" class="onchange-example" data-color-format="hex" value="GreenYellow"> <span class="onchange-example" style="padding:3px;border:1px solid #ccc;">this span is updated on change</span>

        <script>
            $("input.onchange-example").ColorPickerSliders({
                order: {
                    hsl: 1
                },
                onchange: function(container, color) {
                    var span = $("span.onchange-example");

                    span.css("background-color", color.tiny.toRgbString());

                    if (color.cielch.l < 60) {
                        span.css("color", "white");
                    }
                    else {
                        span.css("color", "black");
                    }
                }
            });
        </script>

A full-blown example showing all the sliders in action

The following demo uses all the sliders, and connects to a bunch of inputs to show the actual color values in different formats. The color format can be set on the inputs property.

The color can be updated via any of the connected inputs. The plugin uses the excellent Tiny Color plugin, so it handles all valid CSS color formats (CSS color names as well!).

        <input type="text" class="full-demo-input" data-color-format="hsl">
        <input type="text" class="full-demo-input" data-color-format="hex">
        <input type="text" class="full-demo full-demo-input" data-color-format="rgb">

        $(".full-demo").ColorPickerSliders({
            flat: true,
            invalidcolorsopacity: 0,
            connectedinput: '.full-demo-input'
        });

Colorjoe : jQuery Scaleable color picker

August 12, 2012 | Plugins

Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. Supports touch and AMD module definition as well.

colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.

In addition it’s relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.

Options

provides options to customize its behavior:

Used to set the default color value.

$("#mycolor").colorpicker({
    color: "#ffffff"
});

Defaults to .

defaultPalette (String)

Used to set the default color palette. Possible values are «» or «».

$("#mycolor").colorpicker({
    defaultPalette: 'web'
});

Defaults to .

displayIndicator (Boolean)

Used to show color value on hover and click inside the palette.

$("#mycolor").colorpicker({
    displayIndicator: false
});

Defaults to .

hideButton (Boolean)

Prevent a color button from being added to the the is bound to.

$("#mycolor").colorpicker({
    hideButton: true
});

Defaults to .

history (Boolean)

Used to track selection history (shared among all instances of the ).

$("#mycolor").colorpicker({
    history: false
});

Defaults to .

initialHistory (Array of strings)

Used to provide a color selection history. Colors are provided as s of hexadecimal color values.

$("#mycolor").colorpicker({
    initialHistory: 
});

Defaults to .

showOn (String)

Have the appear automatically when the field receives focus («»), appear only when a button is clicked («»), or appear when either event takes place («»). This option only takes effect when the color picker is instantiated on a .

$("#mycolor").colorpicker({
    showOn: "button"
});

Defaults to «».

strings (String)

Used to translate the widget. It is a comma separated list of all labels used in the UI.

$("#mycolor").colorpicker({
    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs"
});

Defaults to «».

transparentColor (Boolean)

Allow for selection of the «». The hexadecimal value for it is «».

$("#mycolor").colorpicker({
    transparentColor: true
});

Defaults to .

Using the Code

First, load jQuery (v1.7 or greater), jQuery UI (v1.8 or greater), and the widget code:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"type="text/javascript"charset="utf-8"><script>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"type="text/javascript"charset="utf-8"><script>
<scriptsrc="js/evol.colorpicker.min.js"type="text/javascript"charset="utf-8"><script>

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file «evol.colorpicker.css». Here, we use the «» theme as an example:

<link rel="stylesheet" type="text/css" 
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" />
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css" />

Now, let’s attach it to an existing tag:

<script type="text/javascript">
   $(document).ready(function() {
       $("#mycolor").colorpicker();
   });
</script>
 
<input style="width:100px;" id="mycolor" />

This will wrap it into a «holder» and add another beside it for the color box:

<divstyle="width:128px;">
   <inputstyle="width:100px;"id="mycolor"class="colorPicker evo-cp0">
   <divclass="evo-colorind"style="background-color:#8db3e2"></div>
</div>

Using the same syntax, the widget can also be instantiated on a or a tag to show inline. In that case, the generated HTML is the full palette.

What is the drawback of using CIE Lch?

In CIE Lch model, there are colors that can not be converted to RGB values (for example there is no dark yellow color with high chroma value). When there is an Lch variation that can not be represented in the RGB color space, then the color picker searches for the highest possible chroma value for that particular color (for example the only valid chroma value for black or white colors is 0), and uses the lowered chroma value for conversion. This way the color’s hue and the lightness will not distorted.

CIE Lch color picker with hidden invalid color ranges

The position markers on the sliders are always shows an exclamation mark when the actual Lch setting can not be converted to an RGB value, but there is more to it! You can make the invalid colors invisible or semi-transparent using the setting. This way it is easier to find different hues or lightness with the same chroma. You can notice that if the chroma is set to too high, then the preview shows the actual color with the highest possible chroma value. See it in action:

        <span class="cielch-demo2"></span>

        $(".cielch-demo2").ColorPickerSliders({
            flat: true,
            invalidcolorsopacity: 0.2,
            order: {
                cie: 1,
                preview: 2
            }
        });

Smart Forms with jQuery Html5 & CSS3

March 28, 2014 | Ajax, Calendar, CSS2 / CSS3.0, Forms, HTML5, Premium

Smart Forms is a responsive professional Form Framework / pack with a clean consistent Form UI. The framework includes a variety of form Widgets such as Datepickers, Timepickers, Monthpickers, Colorpickers, Numeric Steppers, UI Sliders, Google maps, toggle switches validation, masking among other features.


Features:

  • Multiple form inputs
  • File inputs / uploaders
  • CSS3 checkboxes + Radios
  • CSS3 toggle switches
  • CSS3 review & rating
  • Tooltips + vector icons
  • Notification alerts
  • CSS3 multi shape buttons
  • Animated progress bars
  • Simple pricing tables
  • Ajax form processing
  • Input masking
  • PHP CAPTCHA with refresh support
  • 40+ starter templates included
  • Date & time picker widgets

Changelog:

v2.10.1 (01/04/2020)

Updated

v2.10.0 (09/07/2019)

Added destroy method

v2.10.0 (09/07/2019)

Added destroy method

v2.9.2 (07/27/2019)

More relevant CSS prefixes, transpiled ES module

v2.9.1 (07/20/2019)

  • Fixed: Normalized CSS for input and button
  • Added: options.cancelButton

v2.8.1 (06/29/2019)

Added options.cancelButton.

v2.8.1 (06/15/2019)

Fixed Text field interaction.

v2.8.0 (04/18/2019)

  • Added Shadow DOM support
  • Better event handling when closing the popup

v2.7.2 (01/27/2019)

Removed double onChange event

v2.7.1 (01/12/2019)

CSS vendor prefixes with Autoprefixer.

v2.7.0 (11/18/2018)

Fixed options.editorFormat

v2.6.0 (10/06/2018)

Make an ES6 module that actually works.

v2.5.2 (09/15/2018)

  • Bugfixed.
  • Keyboard navigation and basic accessibility.

v2.4.2 (09/08/2018)

  • movePopup(): Share a picker among multiple parents.
  • silent flag in setColor()

08/18/2018

Added onOpen/onClose callbacks.

Basic Usage:

1. Include jQuery, jQuery UI and jQuery Vanderlee Colorpicker in the header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script src="jquery.colorpicker.js"></script>

2. Include required CSS files to style your color picker

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>

3. Create a container for the color picker

<span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>

4. Call the plugin

<script>
$( function() {
$('.cp-basic').colorpicker();
});
</script>

5. Available options.

alpha: false, // Show alpha controls and mode
altAlpha: true, // change opacity of altField as well?
altField: '', // selector for DOM elements which change background color on change.
altOnChange: true, // true to update on each change, false to update only on close.
altProperties: 'background-color', // comma separated list of any of 'background-color', 'color', 'border-color', 'outline-color'
autoOpen: false, // Open dialog automatically upon creation
buttonClass: null, // If set, the button will get this/these classname(s).
buttonColorize: false,
buttonImage: 'images/ui-colorpicker.png',
buttonImageOnly: false,
buttonText: null, // Text on the button and/or title of button image.
closeOnEscape: true, // Close the dialog when the escape key is pressed.
closeOnOutside: true, // Close the dialog when clicking outside the dialog (not for inline)
color: '#00FF00', // Initial color (for inline only)
colorFormat: 'HEX', // Format string for output color format
draggable: true, // Make popup dialog draggable if header is visible.
duration: 'fast',
hsv: true, // Show HSV controls and modes
inline: true, // Show any divs as inline by default
inlineFrame: true, // Show a border and background when inline.
layout:  {
map: , // Left, Top, Width, Height (in table cells).
bar: ,
preview: ,
hsv: ,
rgb: ,
alpha: ,
hex: ,
lab: ,
cmyk: ,
swatches: 
},
limit: '', // Limit color "resolution":  '', 'websafe', 'nibble', 'binary', 'name'
modal: false, // Modal dialog?
mode: 'h', // Initial editing mode, h, s, v, r, g, b or a
okOnEnter: false, // Close (with OK) when pressing the enter key
parts: '', // leave empty for automatic selection
regional: '',
revert: false, // Revert color upon non
rgb: true, // Show RGB controls and modes
showAnim: 'fadeIn',
showCancelButton: true,
showNoneButton: false,
showCloseButton: true,
showOn: 'focus click alt', // 'focus', 'click', 'button', 'alt', 'both'
showOptions: {},
swatches: null, // null for default or kv-object or names swatches set
swatchesWidth: 84, // width (in number of pixels) of swatches box.
title: null,
cancel: null,
close: null,
init: null,
select: null,
ok: null,
open: null

С этим читают