<script src='<?=base_url('assets')?>/color-picker/spectrum.js'></script>
<link rel='stylesheet' href='<?=base_url('assets')?>/color-picker/spectrum.css' />

<script>
var plt= [
    ['#f44336','#e91e63','#9c27b0','#673ab7','#3f51b5',],
	['#2196f3','#03a9f4','#00bcd4','#009688','#4caf50',],
	['#8bc34a','#cddc39','#ffeb3b','#ffc107','#ff9800',],
	['#ff5722','#795548','#9e9e9e','#607d8b','#000000'],
        
    ]
$("#style_cp_navbar_bg_color").spectrum({
    showPaletteOnly: true,
    showPalette:true,
    color: '<?=set_value('style_cp_navbar_bg_color',$stt['style_cp_navbar_bg_color'])?>',
    palette: plt,
	change: function(c) {
        var label = $("#style_cp_navbar_bg_color");
        label.val(c.toHexString());
    }
});
    $("#style_cp_sidebar_bg_color").spectrum({
    showPaletteOnly: true,
    showPalette:true,
    color: '<?=set_value('style_cp_sidebar_bg_color',$stt['style_cp_sidebar_bg_color'])?>',
    palette: plt,
	change: function(c) {
        var label = $("#style_cp_sidebar_bg_color");
        label.val(c.toHexString());
    }
});  $("#style_front_navbar_bg_color").spectrum({
    showPaletteOnly: true,
    showPalette:true,
    color: '<?=set_value('style_front_navbar_bg_color',$stt['style_front_navbar_bg_color'])?>',
    palette: plt,
	change: function(c) {
        var label = $("#style_front_navbar_bg_color");
        label.val(c.toHexString());
    }
});
      
</script>