Divvil colorwheel
The Divvil colorwheel is a
jQuery UI widget. It offers:
- High-precision colorwheel
- Fully responsive - user can resize on the fly
- Standard jQuery UI behaviour
- WebGL rendering with fallback
- HSL, RGB and string input
- Tested in Chrome, Firefox, IE9+, Safari, Edge
- One .js and one .css, less than 8kb zipped
- Nothing is rendered until the user opens the interface - minimal resource usage
- MIT license
Try it:
Download
Usage
There are two ways to add it: either as a button that brings up a popup, or you can insert the widget in your design.
Colorbutton
Apply it as a standard jQuery UI widget:
$('#myButton').colorbutton({color: '#30D030', dialogTitle: 'Choose color'});
Get or set the color:
var col = $('#myButton').colorbutton('color');
$('#myButton').colorbutton('color', col);
Options:
autofocus | Whether to place keyboard cursor in string input |
color | Default color in the format #30D030 |
dialogHeight | Default dialog height |
dialogTitle | Dialog title string |
dialogWidth | Default dialog width |
enableGL | Whether to use WebGL (if available) for rendering |
enableMouseWheel | Whether to catch mouse wheel input on wheel and sliders |
innerRadius | Wheel inner radius as ratio of diameter (0-0.5) |
maxDiameter | Maximum wheel diameter |
maxTime | Maximum uninterrupted render time for non-WebGL rendering |
Callback:
change | Triggers when the color is changed (may be triggered a lot) |
Example:
$('#myButton').colorbutton({change: function(ui, data) {$('body').css('background',data.color)}});
Colorwheel
$('#myWheel').colorwheel({color: '#30D030'});
Options:
autofocus | Whether to place keyboard cursor in string input |
change | Callback to trigger on change (see below) |
color | Default color in the format #30D030 |
enableGL | Whether to use WebGL (if available) for rendering |
enableMouseWheel | Whether to catch mouse wheel input on wheel and sliders |
innerRadius | Wheel inner radius as ratio of diameter (0-0.5) |
maxDiameter | Maximum wheel diameter |
maxTime | Maximum uninterrupted render time for non-WebGL rendering |
Functions:
Example:
$('#myWheel').colorwheel('color', '#ABCDEF');
resize | Re-render a larger wheel if required, and force resizing on some browsers if the proportions of the container have changed |
Callback:
change | Triggers when the color is changed (may be triggered a lot) |
Example:
$('#myWheel').on('colorwheelchange', function(ui, data) {$('body').css('background',data.color)});