diff --git a/static/js/Editor.js b/static/js/Editor.js
index 6bd428d..8b8576d 100644
--- a/static/js/Editor.js
+++ b/static/js/Editor.js
@@ -1546,7 +1546,7 @@ Editor.prototype.current_colors = function () {
     if ( name == "body" )
       break;
 
-    if ( name == "font" && node.getAttribute( "color" ) ) {
+    if ( foreground == null && name == "font" && node.getAttribute( "color" ) ) {
       foreground = node.getAttribute( "color" );
     } else if ( name == "span" || name == "font" ) {
       if ( foreground == null ) {
@@ -1578,8 +1578,7 @@ Editor.prototype.set_foreground_color = function( color_code ) {
   this.exec_command( "forecolor", Color.fromString( color_code ).toHexString() );
   if ( GECKO ) this.exec_command( "styleWithCSS", false );
 
-  if ( MSIE )
-    this.cleanup_color_html();
+  this.cleanup_color_html();
 }
 
 Editor.prototype.set_background_color = function( color_code ) {
@@ -1590,15 +1589,25 @@ Editor.prototype.set_background_color = function( color_code ) {
     this.exec_command( "hilitecolor", Color.fromString( color_code ).toHexString() );
   if ( GECKO ) this.exec_command( "styleWithCSS", false );
 
-  if ( MSIE )
-    this.cleanup_color_html();
+  this.cleanup_color_html();
 }
 
 Editor.prototype.cleanup_color_html = function () {
-  // for some reason, IE likes to add <font size=+0> tags when changing colors, which for some
-  // reason appears to slightly increase the rendered font size
   var fonts = getElementsByTagAndClassName( "font", null, this.document );
 
+  // if we somehow end up with both a color attribute and a CSS style on a particular <font>
+  // element, then remove the color attribute
+  if ( !MSIE ) {
+    for ( var i in fonts ) {
+      var node = fonts[ i ];
+      if ( node.hasAttribute( "style" ) && node.hasAttribute( "color" ) )
+        node.removeAttribute( "color" );
+    }
+    return;
+  }
+
+  // for some reason, IE likes to add <font size=+0> tags when changing colors, which for some
+  // reason appears to slightly increase the rendered font size
   for ( var i in fonts ) {
     var node = fonts[ i ];
 
diff --git a/static/js/Wiki.js b/static/js/Wiki.js
index be9a36c..41ff0d3 100644
--- a/static/js/Wiki.js
+++ b/static/js/Wiki.js
@@ -1581,20 +1581,22 @@ Wiki.prototype.toggle_color_button = function ( event ) {
   if ( this.focused_editor && this.focused_editor.read_write ) {
     this.focused_editor.focus();
 
-    // if a pulldown is already open, then just close it
     var existing_div = getElement( "color_pulldown" );
-
     if ( existing_div ) {
-      this.up_image_button( "color" );
-      existing_div.pulldown.shutdown();
-      existing_div.pulldown = null;
+      if ( hasElementClass( existing_div, "invisible" ) ) {
+        this.down_image_button( "color" );
+        existing_div.pulldown.show();
+      } else {
+        this.up_image_button( "color" );
+        existing_div.pulldown.hide();
+      }
       return;
     }
 
-    this.down_image_button( "color" );
     this.clear_messages();
     this.clear_pulldowns();
 
+    this.down_image_button( "color" );
     new Color_pulldown( this, this.notebook.object_id, this.invoker, event.target(), this.focused_editor );
   }
 
@@ -2842,12 +2844,12 @@ Wiki.prototype.clear_pulldowns = function ( ephemeral_only ) {
 
     // only close the pulldown if it's been open at least a quarter second
     if ( new Date() - result.pulldown.init_time < 250 )
-      continue
+      continue;
     if ( ephemeral_only && !result.pulldown.ephemeral )
       continue;
 
-    result.pulldown.shutdown();
-    result.pulldown = null;
+    if ( result.pulldown.shutdown() )
+      result.pulldown = null;
   }
 }
 
@@ -3187,7 +3189,7 @@ Wiki.prototype.toggle_editor_tools = function ( event, editor ) {
 connect( window, "onload", function ( event ) { new Wiki( new Invoker() ); } );
 
 
-function Pulldown( wiki, notebook_id, pulldown_id, anchor, relative_to, ephemeral ) {
+function Pulldown( wiki, notebook_id, pulldown_id, anchor, relative_to, ephemeral, cache ) {
   this.wiki = wiki;
   this.notebook_id = notebook_id;
   this.div = createDOM( "div", { "id": pulldown_id, "class": "pulldown" } );
@@ -3196,6 +3198,7 @@ function Pulldown( wiki, notebook_id, pulldown_id, anchor, relative_to, ephemera
   this.anchor = anchor;
   this.relative_to = relative_to;
   this.ephemeral = ephemeral;
+  this.cache = cache || false;
 
   addElementClass( this.div, "invisible" );
 
@@ -3304,10 +3307,17 @@ Pulldown.prototype.update_position = function ( always_left_align ) {
 }
 
 Pulldown.prototype.shutdown = function () {
+  // if this pulldown is to be cached, then simply hide it rather than shutting it down completely
+  if ( this.cache ) {
+    addElementClass( this.div, "invisible" );
+    return false;
+  }
+
   disconnectAll( this.div );
 
   if ( this.div && this.div.parentNode )
     removeElement( this.div );
+  return true;
 }
 
 
@@ -3361,6 +3371,18 @@ function Tools_pulldown( wiki, notebook_id, invoker, editor ) {
 Tools_pulldown.prototype = new function () { this.prototype = Pulldown.prototype; };
 Tools_pulldown.prototype.constructor = Tools_pulldown;
 
+Pulldown.prototype.hide = function () {
+  Pulldown.prototype.hide.call( this );
+}
+
+Pulldown.prototype.show = function () {
+  Pulldown.prototype.show.call( this );
+}
+
+Pulldown.prototype.toggle_hidden = function () {
+  Pulldown.prototype.toggle_hidden.call( this );
+}
+
 Tools_pulldown.prototype.startup_clicked = function ( event ) {
   this.editor.startup = this.startup_checkbox.checked;
   this.editor.mark_dirty();
@@ -4579,29 +4601,12 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
   this.initial_selected_mark = null;
   this.selected_color_box = null;
 
-  Pulldown.call( this, wiki, notebook_id, "color_pulldown", anchor );
+  Pulldown.call( this, wiki, notebook_id, "color_pulldown", anchor, null, false, true );
 
   this.invoker = invoker;
-
-  var current_colors = editor.current_colors();
-
-  this.foreground_code = current_colors[ 0 ];
-  if ( this.foreground_code == DEFAULT_FOREGROUND_CODE )
-    this.foreground_code = null;
-
-  this.background_code = current_colors[ 1 ];
-  if ( this.background_code == DEFAULT_BACKGROUND_CODE )
-    this.background_code = null;
+  this.detect_colors();
 
   var foreground_attributes = { "type": "radio", "id": "foreground_color_radio", "name": "color_type", "value": "foreground" };
-  var background_attributes = { "type": "radio", "id": "background_color_radio", "name": "color_type", "value": "background" };
-
-  if ( this.foreground_code || !this.background_code ) {
-    foreground_attributes[ "checked" ] = true;
-  } else {
-    background_attributes[ "checked" ] = true;
-  }
-
   this.foreground_radio = createDOM( "input", foreground_attributes );
 
   // using a button here instead of a <label> to make IE happy: when a <label> is used, clicking
@@ -4610,6 +4615,7 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
     { "type": "button", "class": "radio_label small_button", "value": "text", "title": "Set the current text color." }
   );
 
+  var background_attributes = { "type": "radio", "id": "background_color_radio", "name": "color_type", "value": "background" };
   this.background_radio = createDOM( "input", background_attributes );
   this.background_label = createDOM( "input",
     { "type": "button", "class": "radio_label small_button", "value": "background", "title": "Set the current background color." }
@@ -4654,16 +4660,7 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
   var div = createDOM( "div", {}, radio_area, this.table );
   appendChildNodes( this.div, div );
 
-  if ( this.foreground_code || !this.background_code ) {
-    this.foreground_code = this.foreground_code || DEFAULT_FOREGROUND_CODE;
-    this.background_code = this.background_code || DEFAULT_BACKGROUND_CODE;
-    this.select_color( this.foreground_code, true );
-  } else {
-    this.foreground_code = this.foreground_code || DEFAULT_FOREGROUND_CODE;
-    this.background_code = this.background_code || DEFAULT_BACKGROUND_CODE;
-    this.select_color( this.background_code, true );
-  }
-
+  this.update_colors();
 
   var self = this;
   connect( this.table, "onmousedown", function ( event ) { self.color_mouse_pressed( event ); } );
@@ -4679,6 +4676,42 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
 Color_pulldown.prototype = new function () { this.prototype = Pulldown.prototype; };
 Color_pulldown.prototype.constructor = Color_pulldown;
 
+Color_pulldown.prototype.detect_colors = function () {
+  var current_colors = this.editor.current_colors();
+
+  this.foreground_code = current_colors[ 0 ];
+  if ( this.foreground_code == DEFAULT_FOREGROUND_CODE )
+    this.foreground_code = null;
+
+  this.background_code = current_colors[ 1 ];
+  if ( this.background_code == DEFAULT_BACKGROUND_CODE )
+    this.background_code = null;
+}
+
+Color_pulldown.prototype.update_colors = function () {
+  if ( this.foreground_code || !this.background_code ) {
+    this.foreground_code = this.foreground_code || DEFAULT_FOREGROUND_CODE;
+    this.background_code = this.background_code || DEFAULT_BACKGROUND_CODE;
+    this.foreground_radio_clicked();
+  } else {
+    this.foreground_code = this.foreground_code || DEFAULT_FOREGROUND_CODE;
+    this.background_code = this.background_code || DEFAULT_BACKGROUND_CODE;
+    this.background_radio_clicked();
+  }
+}
+
+Color_pulldown.prototype.show = function () {
+  this.detect_colors();
+  this.update_colors();
+
+  Pulldown.prototype.update_position.call( this );
+  removeElementClass( this.div, "invisible" );
+}
+
+Color_pulldown.prototype.hide = function () {
+  addElementClass( this.div, "invisible" );
+}
+
 Color_pulldown.prototype.color_mouse_pressed = function ( event ) {
   var color_box = event.target();
   if ( !hasElementClass( color_box, "color_box" ) )
@@ -4717,9 +4750,9 @@ Color_pulldown.prototype.select_color_box = function ( color_box, color_code, sk
   if ( color_code == undefined || color_code == null )
     color_code = getStyle( color_box, "background-color" );
 
-  var LIGHT_DARK_THRESHOLD = 0.45;
+  var LIGHT_DARK_THRESHOLD = 0.5;
 
-  if ( Color.fromString( color_code ).asHSL().l >= LIGHT_DARK_THRESHOLD )
+  if ( Color.fromString( color_code ).asHSL().l > LIGHT_DARK_THRESHOLD )
     addElementClass( color_box, "color_box_light_selected" );
   else
     addElementClass( color_box, "color_box_dark_selected" );
@@ -4746,7 +4779,8 @@ Color_pulldown.prototype.background_radio_clicked = function ( event ) {
 }
 
 Color_pulldown.prototype.shutdown = function () {
-  Pulldown.prototype.shutdown.call( this );
+  if ( !Pulldown.prototype.shutdown.call( this ) )
+    return; // shutdown vetoed
 
   this.anchor.pulldown = null;
   disconnectAll( this.table );