jQuery Plugin: Canvas-based Photoshop Like Color Picker
Follow on Twitter

Yet Another jQuery Photoshop Like Color Picker Plugin

Yes, there are many different color picker widgets out there implemented using JavaScript. Yet this one is different with any of them from the root. As you might have noticed, yes, it's implemented using the HTML5 <canvas> element. The transparent image based color picker has a big drawback: it's hard to resize. You always limited by the image size when you want to display a proper-sized color picker for you application. But canvas based color picker is different. You can change the color picker to any size you want.

Many demos and demo source code are provided in the following section. They are all alive for you to try. Detailed document and source code are also available for download.

  1. Simple popup color picker linked to DIV element

    Click Me
    Source Code:
    $(".cp2").CanvasColorPicker();

  2. Simple popup color picker linked to INPUT element

    Source Code:
    $(".cp3").CanvasColorPicker();

  3. Flat mode color picker with different size:

    70x30
    90x60
    140x100
    280x140
    340x200
    This is the test text for Flat mode color picker. When color is changing, the color of this text will be changed as well.
    Source Code:
    $(".cp1").CanvasColorPicker({
      flat:true,
      onColorChange:function(rgb,hsv){
         $(".cp1-preview").css("color","RGB(" + rgb.r + "," + rgb.g  + "," + rgb.b + ")");
         $(".cp1-preview pre")
            .css("color","rgb(0,0,0)")
            .css("background-color","RGB(" + rgb.r + "," + rgb.g  + "," + rgb.b + ")");
      }
   });

  4. Customized Color Picker

    Click Me
    Source Code:
    $(".cp5").CanvasColorPicker({
   width:300,
   height:160,   
   color:{r:64,g:255,b:255},
   drawColorMapPointer:function(ctx,w,h,x,y,l){
      if ( this.icon == null ){
         this.icon = document.createElement("canvas");
         this.icon.width = "16"; this.icon.height = "16";
         var ctx1 = this.icon.getContext("2d");
         ctx1.beginPath();
         ctx1.strokeStyle = "rgb(255,255,255)";
         ctx1.moveTo(0,0);ctx1.lineTo(16,16);
         ctx1.moveTo(0,16);ctx1.lineTo(16,0);
         ctx1.stroke();
      }
      ctx.drawImage(this.icon,x-8,y-8);
   },
   drawHueMapPointer:function(ctx,w,h,x,y,l){
      if ( this.icon == null ){
         this.icon = document.createElement("canvas");
         this.icon.width = "8"; this.icon.height = "8";
         var ctx1 = this.icon.getContext("2d");
         ctx1.beginPath();
         ctx1.strokeStyle = "rgb(255,255,255)";
         ctx1.moveTo(0,0);ctx1.lineTo(8,8);
         ctx1.moveTo(0,8);ctx1.lineTo(8,0);
         ctx1.stroke();
      }
      ctx.drawImage(this.icon,x-4,y-4);
   }
});

  5. Another Customized Color Picker

    Click Me
    Source Code:
    $(".cp6").CanvasColorPicker({
   width:300,height:150,
   drawColorMapPointer:function(ctx,w,h,x,y,l){
      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = ( l < 128 ) ? "rgb(255,255,255)" : "rgb(0,0,0)";
      
      ctx.moveTo(x+0.5,0.5); 
      ctx.lineTo(x+0.5,h-0.5);
      
      ctx.moveTo(0.5,y + 0.5); 
      ctx.lineTo(w-0.5,y+0.5);
      
      ctx.stroke();
   }
});

Canvas Color Picker Document


OptionsDefault valueDescription
flat false Set to true to make the color picker showing in current page. The matched elements will become the container of the color picker and the size of the matched elements is the size of the color picker.
width 400 The width of the color picker. If the color picker is in flat mode, this value will be ignored and the matched element width will be used instead. The minimum width of a color picker is 60. Any setting with less than 60 width will be adjusted to 60.
height 400 The height of the color picker. If the color picker is in flat mode, this value will be ignored and the matched element height will be used instead. The minimum height of a color picker is 30. Any setting with less than 30 height will be adjusted to 30.
color rgb(0,0,0) Initial color when the color picker is visible. If the matched element is an input box, the initial color will be the value of the input text if the text can be parsed as a valid color value like #FFFFFF
 
showColor true Flag to show or hide the color value. By default it will show the color value, however these flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 100.
showRGB true Flag to show or hide the individual R,G,B channel value. By default it will show the R,G,B value, however these flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 150.
showHSB true Flag to show or hide the individual hue, saturation and brightness value. By default it will show the H,S,B value, however these flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 150.
showButtons true Flag to show or hide the OK, Cancel button. By default it will show these two buttons. However this flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 150.
showPreview true Flag to show or hide the preview color box. By default it will show the preview color box. However this flag will be auto-overwritten to false when there is not enough space to show it. It will be set to false when width of the color picker is less than 200 or height of the color picker is less than 100.
 
onColorChange callback function Callback function triggered when color is changed.
$(".cp6").CanvasColorPicker({
   onColorChange: function(RGB,HSB){
      // RGB, current color in rgb format: {r,g,b}
      // HSB: current color in hsb format: {h,s,b}
      
      // Your code starts from here
      
   }
});
onOK callback function Callback function triggered when OK button is clicked.
$(".cp6").CanvasColorPicker({
   onOK: function(RGB,HSB){
      // RGB, current color in rgb format: {r,g,b}
      // HSB: current color in hsb format: {h,s,b}
      
      // Your code starts from here
      
      // return true will hide the color picker, 
      //        false will not hide the color picker
   }
});
onCancel callback function Callback function triggered when Cancel button is clicked.
$(".cp6").CanvasColorPicker({
   onCancel: function(RGB,HSB){
      // RGB, original color in rgb format: {r,g,b}
      // HSB: original color in hsb format: {h,s,b}
      
      // Your code starts from here
      
      // return true will hide the color picker, 
      //        false will not hide the color picker
   }
});
drawColorMapPointer callback function Callback function triggered to draw a customized color map pointer.
$(".cp6").CanvasColorPicker({
   drawColorMapPointer: function(context,width,height,x,y,luminosity){
      // context    : Canvas context of the color map
      // width      : width of color map canvas
      // height     : height of color map canvas
      // x          : Horizontal position relative to color map canvas
      // y          : Vertical position relative to color map canvas
      // luminosity : Calculated luminosity value of the color in (x,y) 
      //              position of color map canvas
      
      // Your code starts from here
   }
});
drawHueMapPointer callback function Callback function triggered to draw a customized hue map pointer.
$(".cp6").CanvasColorPicker({
   drawHueMapPointer: function(context,width,height,x,y,luminosity){
      // context    : Canvas context of the hue map
      // width      : width of hue map canvas
      // height     : height of hue map canvas
      // x          : Horizontal position relative to hue map canvas
      // y          : Vertical position relative to hue map canvas
      // luminosity : Calculated luminosity value of the color in (x,y) 
      //              position of hue map canvas
      
      // Your code starts from here
   }
});


Other great javascript color pickers

Source Code Download

Care to leave your comment?