Color Picker Control: Examples

The Color Picker Control allows you to implement a rich, powerful, visual color selection tool that returns color values in RGB, hex, and HSV formats.

• Inline Color Picker Control from Script: This example demonstrates the use of an inline Color Picker instance built entirely with JavaScript.
• Example of Color Picker Built in a Dialog via JavaScript: Color Picker interactions commonly call for the picker to be displayed as part of a floating dialog window; this example demonstrates how to create such an implementation while building the Color Picker's DOM structure via JavaScript.
• Example of Color Picker Built in a Dialog from Markup: Color Picker interactions commonly call for the picker to be displayed as part of a floating dialog window; this example demonstrates how to create such an implementation while placing the Color Picker's DOM structure on the page prior to instantiating the picker.
• Example of Specifying Custom Labels and Element IDs for Color Picker: When you want to have multiple Color Pickers on the same page, or when you want to internationalize them, you'll need to customize element IDs and/or form-control labels. This example shows you how.
• Skinning Example: Many YUI Controls have CSS "skins" that define their look and feel. The default skin for YUI is the Sam Skin. This example calls out the CSS used to skin the Color Picker control.

Other YUI Examples That Make Use of the Color Picker Control

• Color Picker Button (included with examples for the Button Control)