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.

The Example

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 });

By attaching the picker to just a div and specifying the flat parameter to be true, you should see the following:

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.

Wrapping Things Up

By placing the hex code into the text field at the end, we ensure that we can access the hex code from normal forms and JavaScript alike. By using standard convention with the form handling, this method also ensures that there is a safe fallback to users who have JavaScript disabled. The following is the completed example using the hide event to return the hex code, and then making use of that hex code to style the page.

Tutorial kindly written by Nathan Wong

  • http://jerodsanto.net Jerod

    Is this a plugin or a part of jQuery UI? I don’t see this on the jQuery UI download page. How about a link?

    Thanks!

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?()

  • http://www.digitaldesignadvice.com/ lucy

    I think this is a really good colour choice. I really want to expand on my jQuery knowledge. Do you have any more jQuery information.

  • http://www.1stwebdesigner.com Dainis Graveris

    really nice jquery tut! I am always amazed of JS capabilities, thanks!

  • http://jerodsanto.net Jerod

    I see you added a link to the jQuery UI homepage. However, I cannot for the life of me find a download for the color picker on this page. Was it previously included with jQuery UI but has been moved into a plugin or something?

    Can you shed some light on this for us? Thanks.

  • http://WAYSMAKEMONEY.NET WAYSMAKEMONEY

    nice tool, thanks alot

  • Simon

    Download available at – http://www.eyecon.ro/colorpicker/

  • http://www.brianswebdesign.com Brian Gottier

    This is great. Thanks for sharing!

  • http://mppersonal.com empe

    hey.. i can’t find the plugins..

    hellppp :(

  • http://www.jackfranklin.co.uk Jack F

    Can’t find the plugin either. Would love to have it?

  • http://www.branditsolutions.com managed hosting

    Great tool.. Thanks for sharing.. :D

  • http://www.marblehost.com Web Hosting

    Very useful article ! I wold like to see more article about jQuery , since this is a low documented subject , in my opinion . Best regards, and congratulations for this nice looking article .

  • http://www.steri-solutions.de webdesign duisburg

    Great! Thanks for sharing!

  • James West

    Thank you for the explanation
    This post encouraged me to finally have a go at mixing up some JQuery into my Ruby on Rails project.
    In my attem to ge this working though I have coe unstuck with your first example.

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

    Ater adding this into my aspplication.js file and setting up the approriate div in my partial viewe I find I am facing an ‘EYE’ is not defined error.

    I have a had some input from the Rails Forum regarding this here
    http://railsforum.com/viewtopic.php?pid=93201#p93201
    but I would like to know if anyone has any idea as to what could cause this problem?

    Thanks

    James

  • James West

    Problem sorted.
    I had not taken account of the case sensitive natiure of jquery in rails and I also had not sorted out the noConflicts correctly

  • http://www.netizen.web.tr web sitesi

    Great! Thanks for sharing!

  • Micheal

    it is nice plugin but it is not compatible with IE.

  • http://www.onextrapixel.com Terrance(OXP)

    This may comes in handy. Thanks for sharing.

  • Anonymous

    Great work, but don’t work with IE6.

  • Pingback: ZenVerse – 11 free and great javascript colour pickers for web development()

  • http://mishrya.com Alok

    very intersting jquery tips

  • aamir

    not working for IE7

  • http://www.kienthuclaptop.com WAMPvn

    thanks a lot! this will be so useful!

  • http://reliable-hosts.com eline

    thanks for sharing it with us.it contributes to our knowledge enhancement.thanks

  • Pingback: jQuery Color Picker | Design Reviver()

  • http://ravensoft.com Raven

    http://www.eyecon.ro/colorpicker/

    use this plug in.

    its far better than what shown on this page. basically the same. BUT it supports cross browsers. while this page doesn’t works in IE

  • Pingback: jQuery Color Picker()

  • khainestar

    I can recommend

    http://www.eyecon.ro/colorpicker/

    Took me ages to find and it was well worth the search.

  • Pingback: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/ | Welcome to Designer()

  • http://thiyagarajan.wordpress.com/ Thiyagarajan Veluchamy

    Hi,

    Thank you very much …

  • http://www.shoppinghermes.com hermes kelly bag

    use this plug in.

    its far better than what shown on this page. basically the same. BUT it supports cross browsers. while this page doesn’t works in IE

  • http://www.pneumatic-systems.com Tirumal

    That was really a great tool. jQuery is best. Thanks for sharing this!!!! :)

  • Pingback: Recursos para Jquery (tutoriales, plugins, charts) | El Blog de Rene Silva()

  • http://traceedupes.tumblr.com/ Antonia Kilcoyne

    This is a exellent resource. Ill visit again.

  • Pingback: 10 Color Picker Plugins | Web Design Northamptonshire()

  • Guest

    Hi this a great color picker. But if I change jquery latest version it will not work. So how do I do?

  • josedvq

    colpick Color Picker is an updated version of this color picker. It works with the latest jQuery and is extremely lightweight (less than 35KB). It has also several skins and layouts: http://colpick.com/plugin