.wrap('<div style="width:'+(this.options.hideButton?this.element.width():this.element.width()+32)+'px;'+
                        (isIE?'margin-bottom:-21px;':'')+
                        (isMoz?'padding:1px 0;':'')+
                        '"></div>') 

$("#colorPicker").colorpicker({
    defaultPalette: 'web',
    history: false,
    displayIndicator: false
});

<input type="hidden" id="colorPicker" />
<div onclick="$('#colorPicker').colorpicker('showPalette')">Click here!</div>

showPalette: function () {
    (...)
    $(document.body).on('click.' + that._id, function (evt) {
        if (evt.target != that.element.get(0){
            that.hidePalette();
        }
    })
    (...)
}

version: '1.0',

options: {
    color: null, // example default:'#31859B'
    showOn: 'both', // possible values 'focus','button','both'
    strings: 'Theme Colors,Standard Colors,More Colors,Less Colors'
},

_create: function() {
    this._paletteIdx=1;
    this._id='evo-cp'+_idx++;
    this._enabled=true;
    var that=this;
    switch(this.element[0].tagName){
        case 'INPUT':
            var color=this.options.color,
                e=this.element;
            this._isPopup=true;
            this._palette=null;
            if(color!=null){
                e.val(color);
            }else{
                var v=e.val();
                if(v!=''){
                    color=this.options.color=v;
                }
            }
            e.addClass('colorPicker '+this._id)
                .wrap('<div style="width:'+(this.element.width()+32)+'px;'
                    +($.browser.msie?'margin-bottom:-21px;':'')
                    +($.browser.mozilla?'padding:1px 0;':'')
                    +'"></div>')
                .after('<div class="evo-colorind'+($.browser.mozilla?'-ff':_ie)+'" '+
                    (color!=null?'style="background-color:'+color+'"':'')+'></div>')
                .on('keyup onpaste', function(evt){
                    var c=$(this).val();
                    if(c!=that.options.color){
                        that._setValue(c, true);
                    }
                });
            var showOn=this.options.showOn;
            if(showOn=='both' || showOn=='focus'){
                e.on('focus', function(){
                    that.showPalette();
                })
            }
            if(showOn=='both' || showOn=='button'){
                e.next().on('click', function(evt){
                    evt.stopPropagation();
                    that.showPalette();
                });
            }
            break;
        default:
            this._isPopup=false;
            this.element.html(this._paletteHTML())
                .attr('aria-haspopup','true')
                .find('.evo-more a').on('click', function(){
                    that._switchPalette();
                });
            this._palette=this.element;
            this._bindColors();
    }
},

_paletteHTML: function() {
    var h=[], pIdx=this._paletteIdx;
    h.push('<div class="evo-pop',_ie,' ui-widget ui-widget-content ui-corner-all"',
        this._isPopup?' style="position:absolute"':'', '>');
    h.push('<span>',this['_paletteHTML'+pIdx](),'</span>');
    h.push('<div class="evo-more"><a href="javascript:void(0)">',
        this.options.strings.split(',')[1+pIdx],'</a></div>');
    h.push(this._colorIndHTML(this.options.color,'left'));
    h.push(this._colorIndHTML('','right'));
    h.push('</div>');
    return h.join('');
},

_colorIndHTML: function(c,fl) {
    var h=[];
    h.push('<div class="evo-color" style="float:left"><div style="');
    h.push(c?'background-color:'+c:'display:none');
    if($.browser.msie){
        h.push('" class="evo-colorbox-ie"></div><span class=".evo-colortxt-ie" ');
    }else{
        h.push('"></div><span ');
    }
    h.push(c?'>'+c+'</span>':'/>');
    h.push('</div>');
    return h.join('');
},

_paletteHTML1: function() {
    var h=[], labels=this.options.strings.split(','),
        isIE=$.browser.msie,
        oTD1='<td style="background-color:#',
        oTD2='" data-cp-value="#',
        cTD=isIE?'"><div style="width:2px;"></div></td>':'"><span/></td>',
        oTRTH='<tr><th colspan="10" class="ui-widget-content">';
    // base theme colors
    h.push('<table class="evo-palette',_ie,'">',oTRTH,labels[0],'</th></tr><tr>');
    for(var i=0;i<10;i++){ 
        h.push(oTD1, baseThemeColors[i], oTD2, baseThemeColors[i], cTD);
    }
    h.push('</tr>');
    if(!isIE){
        h.push('<tr><th colspan="10"></th></tr>');
    }
    h.push('<tr class="top">');
    // theme colors
    for(var i=0;i<10;i++){ 
        h.push(oTD1, subThemeColors[i], oTD2, subThemeColors[i], cTD);
    }
    for(var r=1;r<4;r++){
        h.push('</tr><tr class="in">');
        for(var i=0;i<10;i++){ 
            h.push(oTD1, subThemeColors[r * 10 + i], oTD2, subThemeColors[r * 10 + i], cTD);
        }           
    }
    h.push('</tr><tr class="bottom">');
    for(var i=40;i<50;i++){ 
        h.push(oTD1, subThemeColors[i], oTD2, subThemeColors[i], cTD);
    }
    h.push('</tr>',oTRTH,labels[1],'</th></tr><tr>');
    // standard colors
    for(var i=0;i<10;i++){ 
        h.push(oTD1, standardColors[i], oTD2, standardColors[i], cTD);
    }
    h.push('</tr></table>');
    return h.join(''); 
},

_paletteHTML2: function() {
    function toHex(i){
        var h=i.toString(16);
        if(h.length==1){
            h='0'+h;
        }
        return h+h+h;
    };
    var h=[],
        oTD1 = '<td style="background-color:#',
        oTD2 = '" data-cp-value="#',
        cTD=$.browser.msie?'"><div style="width:5px;"></div></td>':'"><span/></td>',
        oTableTR='<table class="evo-palette2'+_ie+'"><tr>',
        cTableTR='</tr></table>';
    h.push('<div class="evo-palcenter">');
    // hexagon colors
    for(var r=0,rMax=moreColors.length;r<rMax;r++){
        h.push(oTableTR);
        var cs=moreColors[r];
        for(var i=0,iMax=cs.length;i<iMax;i++){ 
            h.push(oTD1, cs[i], oTD2, cs[i], cTD);
        }
        h.push(cTableTR);
    }
    h.push('<div class="evo-sep"/>');
    // gray scale colors
    var h2=[];
    h.push(oTableTR);
    for(var i=255;i>10;i-=10){
        h.push(oTD1, toHex(i), oTD2, toHex(i), cTD);
        i-=10;
        h2.push(oTD1, toHex(i), oTD2, toHex(i), cTD);
    }
    h.push(cTableTR,oTableTR,h2.join(''),cTableTR); 
    h.push('</div>');
    return h.join('');
},

_switchPalette: function() {
    if(this._enabled){
        var idx=(this._paletteIdx==2)?1:2;
        var h=this['_paletteHTML'+idx]();
        this._paletteIdx=idx;
        this._palette.find('.evo-more')
            .prev().html(h).end()
            .children().eq(0).html(this.options.strings.split(',')[this._paletteIdx+1]);
    }
},

showPalette: function() {
    if(this._enabled){
        $('.colorPicker').not('.'+this._id).colorpicker('hidePalette');
        if(this._palette==null){
            this._palette=this.element.next()
                .after(this._paletteHTML()).next()
                .on('click',function(evt){
                    evt.stopPropagation();
                });
            this._bindColors();
            var that=this;
            $(document.body).on('click.'+this._id,function(evt){
                if(evt.target!=that.element.get(0)){
                    that.hidePalette();
                }
            });
            this._palette.find('.evo-more a').on('click', function(evt){
                that._switchPalette();
            });
        }
    }
    return this;
},  

hidePalette: function() {
    if(this._isPopup && this._palette){
        $(document.body).off('click.'+this._id);
        var that=this;
        this._palette.off('mouseover click', 'td')
            .fadeOut(function(){
                that._palette.remove();
                that._palette=that._cTxt=null;
            })
    }
    return this;
},

_bindColors: function() {
    var es=this._palette.find('div.evo-color')
    this._cTxt1=es.eq(0).children().eq(0);
    this._cTxt2=es.eq(1).children().eq(0);
    var that=this;
    this._palette
        .on('click', 'td', function(evt){
            if(that._enabled){
                var c=$(this).data('cp-value');
                that._setValue(c);
            }
        })
        .on('mouseover', 'td', function(evt){
            if(that._enabled){
                var c = $(this).data('cp-value');
                that._setColorInd(c,2);
                that.element.trigger('mouseover.color', c);
            }
        })
},

val: function(value) {
    if (typeof value=='undefined') {
        return this.options.color;
    }else{
        this._setValue(value);
        return this;
    }
},

_setValue: function(c, noHide) {
    this.options.color=c;
    if(this._isPopup){
        if(!noHide){
            this.hidePalette();
        }
        this.element.val(c)
            .next().attr('style', 'background-color:'+c);
    }else{
        this._setColorInd(c,1);
    }
    this.element.trigger('change.color', c);
},

_setColorInd: function(c,idx) {
    this['_cTxt'+idx].attr('style','background-color:'+c)
        .next().html(c);
},

_setOption: function(key, value) {
    if(key=='color'){
        this._setValue(value, true);
    }else{
        this.options[key]=value;
    }
},

enable: function() {
    var e=this.element;
    if(this._isPopup){
        e.removeAttr('disabled');
    }else{
        e.css({'opacity': '1'});
    }
    e.removeAttr('aria-disabled');
    this._enabled=true;
    return this;
},

disable: function() {
    var e=this.element;
    if(this._isPopup){
        e.attr('disabled', 'disabled');
    }else{
        this.hidePalette();
        e.css({'opacity': '0.3'});
    }
    e.attr('aria-disabled','true');
    this._enabled=false;
    return this;
},

isDisabled: function() {
    return !this._enabled;
},

destroy: function() {
    $(document.body).off('click.'+this._id);
    if(this._palette){
        this._palette.off('mouseover click', 'td');
        if(this._isPopup){
            this._palette.remove();
        }
        this._palette=this._cTxt=null;
    }
    if(this._isPopup){
        this.element
            .next().off('click').remove()
            .end().off('focus').unwrap();                       
    }
    this.element.removeClass('colorPicker '+this.id).empty();
    $.Widget.prototype.destroy.call(this);
}

td:focus {
  border: 2px solid black;
}