如图所示

① 引入外部样式和JS库 需要jquery

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/colorpicker.js"></script>
<link rel="stylesheet" type="text/css" href="./css/colorpicker.css">

② 添加html代码

<span id="style_color" style="background-color: {$style_color};" class="color mytips" data-title="修改样式风格颜色<br/>正文、边框、背景颜色"></span>

③ 激活点击事件

var style_color = "{$style_color}";
var last_style_color = "{$style_color}";

$('#style_color').ColorPicker({
    color: style_color,
    onShow: function(colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function(colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onSubmit: function(hsb, hex, rgb) {
        //修改标签选中颜色
        $('#style_color').css('background-color', '#' + hex);
        //隐藏界面
        $('#style_color').ColorPickerHide();
        //获取最新的样式 
        style_color = '#' + hex;
        //修改全局风格
        changecolor();
        //记录当前颜色
        last_style_color = style_color;
        //置cookie
        setCookie('style_color', style_color, 3600 * 24 * 365);
    }
});

相关函数

function changecolor() {
    console.log(style_color);
    console.log(last_style_color);
    var eles = $('.changecolor');
    $.each(eles, function(index, el) {
        var el = $(el);
        var style = el.attr('style');
        if (style == '') {
            return;
        }
        var style_arr = style.split(";");
        var style_json = {};
        for (var i = 0; i < style_arr.length; i++) {
            if (style_arr[i].replace(/^\s+|\s+$/g, "") == "") {
                continue;
            }
            var k_v = style_arr[i].split(":");
            var key = k_v[0];
            var value = k_v[1];
            // 去除两头空格: 
            key = key.replace(/^\s+|\s+$/g, "");
            value = value.replace(/^\s+|\s+$/g, "");
            style_json[key] = value;
        }
        //修改设置了背景  左边框
        var keys = ['background-color', 'border-left-color', 'border-color', 'color', 'border-top-color', 'border-bottom-color'];
        var css_keys = ['background-color', 'border-left-color', 'borderColor', 'color', 'borderTopColor', 'borderBottomColor'];
        for (var i = 0; i < keys.length; i++) {
            var k = keys[i];
            if (style_json[k] != null) {
                //检测是不是rgb的
                if (style_json[k].indexOf('rgb') != -1) {
                    style_json[k] = style_json[k].colorHex();
                }
                if (style_json[k] == last_style_color) {
                    el.css(css_keys[i], style_color);
                }
            }
        }
        //替换 不能直接修改颜色
        var keys = ['border-bottom', 'border-top', 'border-left', 'border'];
        var css_keys = ['borderBottom', 'borderTop', 'borderLeft', 'border'];
        for (var i = 0; i < keys.length; i++) {
            var k = keys[i];
            if (style_json[k] != null) {
                //检测是不是rgb的
                var pos = style_json[k].indexOf('rgb');
                if (pos != -1) {
                    var hex = style_json[k].substr(pos);
                    hex = hex.replace(/^\s+|\s+$/g, "");
                    style_json[k] = style_json[k].replace(hex, hex.colorHex());
                }
                if (style_json[k].indexOf(last_style_color) != -1) {
                    el.css(css_keys[i], style_json[k].replace(last_style_color, style_color));
                }
            }
        }
    });
}

function setCookie(name, value, time) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + time);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

//读取cookies 
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}

// 十六进制颜色值的正则表达式
var color_reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/*RGB颜色转换为16进制*/
String.prototype.colorHex = function(){
    var that = this;
    if(/^(rgb|RGB)/.test(that)){
        var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
        var strHex = "#";
        for(var i=0; i<aColor.length; i++){
            var hex = Number(aColor[i]).toString(16);
            if(hex === "0"){
                hex += hex; 
            }
            strHex += hex;
        }
        if(strHex.length !== 7){
            strHex = that;  
        }
        return strHex;
    }else if(color_reg.test(that)){
        var aNum = that.replace(/#/,"").split("");
        if(aNum.length === 6){
            return that;    
        }else if(aNum.length === 3){
            var numHex = "#";
            for(var i=0; i<aNum.length; i+=1){
                numHex += (aNum[i]+aNum[i]);
            }
            return numHex;
        }
    }else{
        return that;    
    }
};

/*16进制颜色转为RGB格式*/
String.prototype.colorRgb = function(){
    var sColor = this.toLowerCase();
    if(sColor && reg.test(sColor)){
        if(sColor.length === 4){
            var sColorNew = "#";
            for(var i=1; i<4; i+=1){
                sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));   
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for(var i=1; i<7; i+=2){
            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));  
        }
        return "RGB(" + sColorChange.join(",") + ")";
    }else{
        return sColor;  
    }
};

附带资料  下载地址

更多资料请访问原链接