Color picker with more colors

The extended one is nice, but I'm wondering if it's possible to add one with a slider, I guess is the best way to describe it? Like the one you see when editing a group color on the admin panel.

Hello I edited Ange Tuters code in this Post some to add more colors
Add this to your css:

Code:

        /* Color palette icons */
        .color-option {
          display: inline-block !important;
          width: 15px !important;  /* width of the icon */
          height: 15px !important;  /* height of the icon */
          border: 2px solid #fff !important;  /* white border around the icon */
          margin: 3px !important;  /* space between each icon */
          box-shadow: 0 0 2px #778899;  /* shadow */
          cursor: pointer !important;
        }
       
        .color-option span{
          display: block !important;
          width: 15px !important;  /* width of the icon */
          height: 15px !important;  /* height of the icon */
        }
       
        .color-option, .color-option span {
          border-radius: 2px;  /* roundness */ 
        }
       
        /* Whole palette - the width influences how many icons appear */
        .sceditor-dropdown.sceditor-color-picker {
          width: 200px !important;  /* width of the palette */

          padding: 5px !important;
          border-radius: 5px !important;
        }

Add this to your Administration Panel > Modules > Javascript codes management > Create a new script

Title : Color picker
Placement : In all the pages

Code:

$(function(){$(function(){
          if ($("#text_editor_textarea").length < 1) return;
          $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
            var mColorBasic = [],
            html = $('<div />');
                       
            // begin list of colors
                   
            mColorBasic["Black"] = "#000000";
            mColorBasic["Dark Blue"] = "#00008B";
            mColorBasic["Teal"] = "#008080";
            mColorBasic["Dark Green"] = "#006400";
            mColorBasic["Indigo"] = "#4B0082";
            mColorBasic["Crimson"] = "#DC143C";
            mColorBasic["Orange"] = "#FF4500";
            mColorBasic["Brown"] = "#663300";
               
            mColorBasic["Dark Gray"] = "#666666";
            mColorBasic["Royal Blue"] = "#4169E1";
            mColorBasic["Dark Turquoise"] = "#00CED1";
            mColorBasic["Green"] = "#008000";
            mColorBasic["Purple"] = "#9400D3";
            mColorBasic["Red"] = "#FF0000";
            mColorBasic["Light Orange"] = "#FF9933";
            mColorBasic["Sienna"] = "#A0522D";
               
            mColorBasic["Light Gray"] = "#D3D3D3";
            mColorBasic["Sky Blue"] = "#87CEEB";
            mColorBasic["Cyan"] = "#00FFFF";
            mColorBasic["Green Apple"] = "#32CD32";
            mColorBasic["Mauve"] = "#DA70D6";
            mColorBasic["Salmon"] = "#FA8072";
            mColorBasic["Gold"] = "#FFD700";
            mColorBasic["Light Brown"] = "#CD853F";
               
            mColorBasic["White"] = "#FFFFFF";
            mColorBasic["Pale Turquoise"] = "#AFEEEE";
            mColorBasic["Blue Green"] = "#7FFFD4";
            mColorBasic["Pale Green"] = "#98FB98";
            mColorBasic["Pink"] = "#FFC0CB";
            mColorBasic["Peach"] = "#FFDAB9";
            mColorBasic["Yellow"] = "#FFFF00";
            mColorBasic["Wood"] = "#DEB887";
           
            mColorBasic["Alice Blue"] = "#F0F8FF";
            mColorBasic["AntiqueWhite "] = "#FAEBD7";
            mColorBasic["Aqua "] = "#00FFFF";
            mColorBasic["Aquamarine"] = "#7FFFD4";
            mColorBasic["Azure"] = ""; 
                     
                  
            mColorBasic[" DarkGoldenRod "] = "   #B8860B";
            mColorBasic[" DarkGray "] = "   #A9A9A9";
            mColorBasic[" DarkGreen "] = "   #006400";
            mColorBasic[" DarkKhaki "] = "   #BDB76B";
            mColorBasic[" DarkMagenta "] = "   #8B008B";
            mColorBasic[" DarkOliveGreen    "] = "#556B2F";
            mColorBasic[" DarkOrange "] = "   #FF8C00";
            mColorBasic[" DarkOrchid    "] = "#9932CC";
            mColorBasic[" DarkRed    "] = "#8B0000";
            mColorBasic[" DarkSalmon"] = "    #E9967A";
            mColorBasic[" DarkSeaGreen    "] = "#8FBC8F";
            mColorBasic[" DarkSlateBlue    "] = "#483D8B";
            mColorBasic[" DarkSlateGray "] = "   #2F4F4F";
            mColorBasic[" DarkTurquoise    "] = "#00CED1";
            mColorBasic[" DarkViolet    "] = "#9400D3";
            mColorBasic[" DeepPink    "] = "#FF1493";
            mColorBasic[" DeepSkyBlue    "] = "#00BFFF";
            mColorBasic[" DimGray    "] = "#696969";
            mColorBasic[" DodgerBlue    "] = "#1E90FF";
            mColorBasic[" FireBrick "] = "   #B22222";
            mColorBasic[" FloralWhite    "] = "#FFFAF0";
            mColorBasic[" ForestGreen    "] = "#228B22";
            mColorBasic[" Fuchsia        "] = " #FF00FF";
            mColorBasic[" Gainsboro    "] = "#DCDCDC";
            mColorBasic[" GhostWhite    "] = "#F8F8FF";
            mColorBasic[" Gold "] = "   #FFD700";
            mColorBasic[" GoldenRod "] = "   #DAA520";
            mColorBasic[" Gray "] = "   #808080";
            mColorBasic[" Green "] = "   #008000";
            mColorBasic[" GreenYellow "] = "   #ADFF2F";
            mColorBasic[" HoneyDew "] = "   #F0FFF0";
            mColorBasic[" HotPink    "] = "#FF69B4";
            mColorBasic[" IndianRed  "] = "   #CD5C5C";
            mColorBasic[" Indigo     "] = "#4B0082";
            mColorBasic[" Ivory    "] = "#FFFFF0";
            mColorBasic[" Khaki "] = "   #F0E68C";
            mColorBasic[" Lavender "] = "   #E6E6FA";
            mColorBasic[" LavenderBlush "] = "   #FFF0F5";
            mColorBasic[" LawnGreen "] = "   #7CFC00";
            mColorBasic[" LemonChiffon "] = "   #FFFACD";
            mColorBasic[" LightBlue "] = "   #ADD8E6";

/*
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
            mColorBasic["  "] = "";   
*/
           
                     
            // end list of colors
                     
            for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
                     
            html.find('span').click(function(e) {
              callback($(this).attr('color'));
              editor.closeDropDown(true);
              e.preventDefault();
            });
                     
            editor.createDropDown(caller, "color-picker", html);
          }
        })});

If that one does not work for you here is a different one: http://fmdesign.forumotion.com/t202-sceditor-color-picker-color-cubes