jQuery UI Color Picker

Question

I have heard that jQuery UI includes a Color Picker but could find little documentation regarding it.

Does it exist?

Any decent documentation on how to implement it?

I found this: http://docs.jquery.com/UI/Colorpicker

But using:

$("#colorpicker").colorpicker();

does not work, with Firebug telling me .colorpicker(); is not a method!

It seems to work fine, unless I put it in a dialog UI where it then decides to break.

You can find the code here: http://dev.jquery.com/browser/trunk/ui/colorpicker?rev=5143 but looks like it's not really available from their site any more, might be worth using the one Shin recommended in the answers below, looked quite good! — Shadi Almosri, Jun 09 '09 at 16:53
I searched long and high for a good user friendly one that was just the colours and nothing else: http://www.abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/ — Chud37, Aug 06 '12 at 13:18
If anybody is reading this in 2017, HTML5 color input type is pretty much fully supported now (apart from IE) https://caniuse.com/#feat=input-color — TrojanName, Sep 21 '17 at 16:42

score 39 · Accepted Answer · answered Jun 09 '09 at 16:46

39

You can find some demos and plugins here.

http://jqueryui.pbworks.com/ColorPicker

answered Jun 09 '09 at 16:46

shin

31,901
69
184
271

Yup, I shall try this tommorow. Cheers – Damien Jun 09 '09 at 18:55

score 6 · Answer 2 · answered Oct 13 '15 at 13:55

Perhaps I am very late, but as of now there's another way to use it using the jquery ui slider.

Here's how its shown in the jquery ui docs:

function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
    $( "#swatch" ).css( "background-color", "#" + hex );
  }
  $(function() {
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
  });

#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  Simple Colorpicker
</p>
 
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div>

score 2 · Answer 3 · answered Jun 09 '09 at 16:40

Make sure you have jQuery UI base and the color picker widget included on your page (as well as a copy of jQuery 1.3):

<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.colorpicker.js"></script>

If you have those included, try posting your source so we can see what's going on.

score 1 · Answer 4 · answered Oct 24 '12 at 15:01

1

That is because you are trying to access the plugin before it's loaded. You should try making a call to it when the DOM is loaded by surrounding it with this:

$(document).ready(function(){
    $("#colorpicker").colorpicker();
}

answered Oct 24 '12 at 15:01

Dzhuneyt

8,437
14
64
118

score 1 · Answer 5 · answered Jun 29 '10 at 06:35

1

Had the same problem (is not a method) with jQuery when working on autocomplete. It appeared the code was executed before the autocomplete.js was loaded. So make sure the ui.colorpicker.js is loaded before calling colorpicker.

answered Jun 29 '10 at 06:35

RvdK

19,580
4
64
107

jQuery UI Color Picker

5 Answers5

Linked