Submit your widget
HomeColor PickerjQuery Color Picker

jQuery Color Picker

Created 13 years ago   Views 10356   downloads 2498    Author Nathan Wong
jQuery Color Picker
View DemoDownload
125
Share |

Gone are the days of having to manually enter in hex codes to specify colors: with jQuery UI’s color picker, you can make your web application pick colors as smoothly as you would in desktop applications like Photoshop. When coupled with the visual appeal and functional benefit of color pickers, the ease of using jQuery UI’s gadget is something that’s hard to pass up.

Getting Started

The color picker can be downloaded from the jQuery UI download page and then included in our page using the <script> tag. Furthermore, the CSS file that is inside the default theme folder should be included, as should all of the images. There are a fair number of items to include for the color picker, but they are needed to form the interface. These should be placed within your <head> tags: 

<link rel="stylesheet" href="ui.colorpicker.css"/>
<script language="JavaScript" src="jQuery.js"></script>
<script language="JavaScript" src="jQuery.colorpicker.js"></script>

All we need to do to make use of the color picker gadget is to call the .colorpicker function on a form field or div to begin: 

$('#picker').colorpicker({ flat: true });

It is worth an honorary mention that the eventName parameter can be set to the name of the event that should trigger the opening of the color picker. That is, you can specify to have the color picker show up on mouseover instead of the standard click

You might also like