Index: public/javascripts/jstoolbar/jstoolbar.js
===================================================================
--- tmp/0FaD7t_jstoolbar.js
+++ public/javascripts/jstoolbar/jstoolbar.js
@@ -471,3 +471,47 @@ jsToolBar.prototype.precodeMenu = function(fn){
   });
   return false;
 };
+
+/* Colors menu */
+jsToolBar.prototype.colorsMenu = function(fn){
+  var aColors = [
+    ['#330000','#331900','#333300','#193300','#003300','#003319','#003333','#001933','#000033','#190033','#330033','#330019','#000000'],
+    ['#660000','#663300','#666600','#336600','#006600','#006633','#006666','#003366','#000066','#330066','#660066','#660033','#202020'],
+    ['#990000','#994C00','#999900','#4C9900','#009900','#00994C','#009999','#004C99','#000099','#4C0099','#990099','#99004C','#404040'],
+    ['#CC0000','#CC6600','#CCCC00','#66CC00','#00CC00','#00CC66','#00CCCC','#0066CC','#0000CC','#6600CC','#CC00CC','#CC0066','#606060'],
+    ['#FF0000','#FF8000','#FFFF00','#80FF00','#00FF00','#00FF80','#00FFFF','#0080FF','#0000FF','#7F00FF','#FF00FF','#FF007F','#808080'],
+    ['#FF3333','#FF9933','#FFFF33','#99FF33','#33FF33','#33FF99','#33FFFF','#3399FF','#3333FF','#9933FF','#FF33FF','#FF3399','#A0A0A0'],
+    ['#FF6666','#FFB266','#FFFF66','#B2FF66','#66FF66','#66FFB2','#66FFFF','#66B2FF','#6666FF','#B266FF','#FF66FF','#FF66B2','#C0C0C0'],
+    ['#FF9999','#FFCC99','#FFFF99','#CCFF99','#99FF99','#99FFCC','#99FFFF','#99CCFF','#9999FF','#CC99FF','#FF99FF','#FF99CC','#E0E0E0'],
+    ['#FFCCCC','#FFE5CC','#FFFFCC','#E5FFCC','#CCFFCC','#CCFFE5','#CCFFFF','#CCE5FF','#CCCCFF','#E5CCFF','#FFCCFF','#FFCCE5','#FFFFFF']
+  ];
+  var menu = $('<table style="position:absolute"></table>');
+  var alColors = '';
+  var line;
+  var cell;
+  for (var i = 0; i < aColors.length; i++) {
+    alColors = aColors[i];
+    line = $('<tr></tr>').appendTo(menu);
+    for (var j = 0; j < alColors.length; j++) {
+      cell = $('<td style="background: ' + alColors[j] + '" data-color="' + alColors[j] + '" class="palette"></td>');
+      cell.appendTo(line);
+      cell.mouseover(function(){
+          $(this).addClass('palette-hover');
+        }).mouseout(function(){
+          $(this).removeClass('palette-hover');
+        }).mousedown(function(){
+          fn($(this).data('color'));
+        });
+    }
+  }
+  $("body").append(menu);
+  menu.menu().width(150).position({
+    my: "left top",
+    at: "left bottom",
+    of: this.toolNodes['precode']
+  });
+  $(document).on("mousedown", function() {
+    menu.remove();
+  });
+  return false;
+};
Index: public/javascripts/jstoolbar/textile.js
===================================================================
--- tmp/uMYhSF_textile.js
+++ public/javascripts/jstoolbar/textile.js
@@ -196,6 +196,83 @@ jsToolBar.prototype.elements.precode = {
 // spacer
 jsToolBar.prototype.elements.space4 = {type: 'space'}
 
+// Selection Background Color
+jsToolBar.prototype.elements.bgcolor = {
+  type: 'button',
+  title: 'Background Color',
+  fn: {
+    wiki: function() {
+      var This = this;
+      this.colorsMenu(function(color){
+        This.encloseSelection('%{background-color:' + color + '}', '%', function(str, prefix, suffix) {
+          css_tag_start = str.indexOf('%{');
+          css_tag_end = str.indexOf('}');
+
+          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
+            // Already present, replace color
+            bgcolor_tag = str.indexOf('background-color:');
+            if (bgcolor_tag != -1) {
+              str = str.replace(/(\%\{background\-color\:[A-Za-z1-9#]*)/g, prefix.slice(0, -1));
+            } else {
+              // Insert bgcolor tag before the others
+              new_bgcolor_tag = prefix.substring(2).slice(0, -1);
+              end_str = str.substring(css_tag_start + 2)
+              begin_str = str.substring(0, css_tag_start + 2);
+              str = begin_str + new_bgcolor_tag + ';' + end_str;
+            }
+          } else {
+            str = prefix + str + suffix;
+          }
+
+          return str;
+        });
+      });
+    }
+  }
+}
+
+// Selection Color
+jsToolBar.prototype.elements.color = {
+  type: 'button',
+  title: 'Text Color',
+  fn: {
+    wiki: function() {
+      var This = this;
+      this.colorsMenu(function(color){
+        This.encloseSelection('%{color:' + color + '}', '%', function(str, prefix, suffix) {
+          css_tag_start = str.indexOf('%{');
+          css_tag_end = str.indexOf('}');
+
+          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
+            // Already present, replace color
+            color_tag = str.indexOf('%{color:');
+            color_tag2 = str.indexOf(';color:');
+            if (color_tag != -1) {
+              str = str.replace(/(\%\{color\:[A-Za-z1-9#]*)/g, prefix.slice(0, -1));
+            } else if (color_tag2 != -1) {
+              new_color_tag = ';' + prefix.substring(2).slice(0, -1);
+              str = str.replace(/(;color\:[A-Za-z1-9#]*)/g, new_color_tag);
+            } else {
+              // Insert color tag before the others
+              new_color_tag = prefix.substring(2).slice(0, -1);
+              end_str = str.substring(css_tag_start + 2)
+              begin_str = str.substring(0, css_tag_start + 2);
+              str = begin_str + new_color_tag + ';' + end_str;
+            }
+          } else {
+            str = prefix + str + suffix;
+          }
+
+          return str;
+        });
+      });
+    }
+  }
+}
+
+// spacer
+jsToolBar.prototype.elements.space4 = {type: 'space'}
+
 // wiki page
 jsToolBar.prototype.elements.link = {
   type: 'button',
Index: public/stylesheets/jstoolbar.css
===================================================================
--- tmp/GrILsv_jstoolbar.css
+++ public/stylesheets/jstoolbar.css
@@ -124,6 +124,12 @@
 .jstb_precode {
     background-image: url(../images/jstoolbar/bt_precode.png);
 }
+.jstb_color {
+    background-image: url(../images/jstoolbar/bt_color.png);
+}
+.jstb_bgcolor {
+    background-image: url(../images/jstoolbar/bt_bgcolor.png);
+}
 .jstb_link {
     background-image: url(../images/jstoolbar/bt_link.png);
 }
@@ -133,3 +139,12 @@
 .jstb_help {
     background-image: url(../images/help.png);
 }
+
+table.ui-widget-content td.palette {
+    width: 12px;
+    height: 8px;
+}
+
+table.ui-widget-content td.palette-hover {
+    border: 2px solid;
+}
\ No newline at end of file