jQuery HSL Color Picker
A css and javascript driven HSL picker. Made to be small, styleable and easy to use.
Example
$('input[type="color"]').hslPicker({
color: 'orange'
});
Config
color : string
A hex string (e.g. '#ff0000') or named color to set the initial color. If no initial color is defined, the value of the input will be used. If no color is associated with the picker or 'random' is passed as a color, the picker will select a random color.
hsl : array|object
Define an hsl color as [0, 0.25, 0.5] or [ h: 0, s: 0.25: l: 0.5 ] with percentages as the values. If this color is defined, it will override the color configuration.
disabled : bool
Whether to disable the picker. Initializing with a disabled input will also disable the picker. Disabling the picker overrides disabled inputs.
disableInputs : string|array|object
Prevent specific values from being changed. Passing 'h' would disable the hue; 'hs' would prevent hue and saturation. Can be passed as 'h', ['h'], or { h: true }.
alwaysOpen : bool
Whether to keep the picker modal always open.
Methods
The picker instance can be retrieved by passing 'picker':
var picker = $('input').hslPicker('picker');
.disable()
Disable the picker. Disabling the picker overrides disabled inputs. Can also be triggered via the input.
$('input').trigger('disable');
.enable()
Enable the picker. Enabling the picker overrides disabled inputs. Can also be triggered via the input.
$('input').trigger('enable');
.disableInput(opts)
Disable specific values from being changed.
.enableInputs(opts)
Enable specific values to be changed.
.refresh()
Refresh the picker with the current hsl value on the picker instance. Use this if the hsl values have been changed manually:
var picker = $('input').hslPicker('picker');
picker.h = 0.5;
picker.refresh();
Can also be triggered via the input.
$('input').trigger('refresh');
.open()
Open the picker. Can also be triggered via the input.
$('input').trigger('open');
.close()
Close the picker. Can also be triggered via the input.
$('input').trigger('close');
.update()
Update the value of the color picker. Can be passed a valid color or hsl value. The picker can also be updated by updating the input:
$('input').trigger('update', { color: '#000000' });
.val()
Set or retrieve the hex value of the picker.
.destroy()
Destroy the picker. This will remove all bindings and inputs generated by the picker. Can also be triggered by passing 'destroy' or triggering the input:
$('input').hslPicker('destroy');
// or
$('input').trigger('destroy');
Extending
$.hslPicker is the picker object that can be extened. $.hslPicker also contains helpful color manipulation methods:
.hslToRgb(h, s, l).rgbToHsl(r, g, b).hexToRgb(hex).rgbToHex(r, g, b).hexToHsl(hex).random()
Styles
Include the jquery.hsl-picker.css file. The styles rely on the border-box model which is used by bootstrap by default:
* {
box-sizing: border-box;
}
Support
Modern browsers and IE9+
License
The MIT License (MIT)
Copyright (c) 2014 Joseph Clay
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.