Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Color Picker (gallery-colorpicker) on cdn

Last Updated: 09/15/11

+ 0 -

Ben Delarre

YUI Contributor

Created: 09/12/11
Last CDN Push: 09/28/11
Build Tag: gallery-2011.09.28-20-06
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.0
Free for use.

The ColorPicker module provides several classes useful for dealing with colors. The Y.Colors class provides a couple of helpful conversion methods allowing conversion between RGB and HSL color formats. The Y.ColorPalette class provides a simple color palette to store and reuse color selections. Finally the Y.ColorPicker widget provides a HTML5 based UI for selecting colors.

Note: This widget uses the Canvas element and as such will not work on IE 8 and below, or older browsers.

Code Sample

<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.09.28-20-06'
}).use('gallery-colorpicker', function(Y) {
	// create an instance of the widget
	var colorpicker = new Y.ColorPicker();
	// render the widget into the #picker node
	colorpicker.render("#picker");
	Y.one('#getcolorbutton').on('click',function(ev) {
		ev.halt();
		var hex = colorpicker.get('hex');
		// do something with the hex value....
	});
});