diff --git a/static/css/pad_lite.css b/static/css/pad_lite.css
index 7a33cc3bd..b8ed14b21 100644
--- a/static/css/pad_lite.css
+++ b/static/css/pad_lite.css
@@ -1125,7 +1125,7 @@ ul#colorpickerswatches
 
 ul#colorpickerswatches li 
 {
-  border: 1px solid #fff; 
+  border: 1px solid #ccc; 
   width: 14px; 
   height: 14px; 
   overflow: hidden;
diff --git a/static/img/colorpicker.gif b/static/img/colorpicker.gif
index effa3cc01..4f7444658 100644
Binary files a/static/img/colorpicker.gif and b/static/img/colorpicker.gif differ
diff --git a/static/js/pad_userlist.js b/static/js/pad_userlist.js
index 486da81ec..9d2ff54db 100644
--- a/static/js/pad_userlist.js
+++ b/static/js/pad_userlist.js
@@ -609,7 +609,7 @@ function closeColorPicker(accept) {
   }
   
   colorPickerOpen = false;
-  $("#mycolorpicker").css('display', 'none');
+  $("#mycolorpicker").fadeOut("fast");
 }
 
 function showColorPicker() {
@@ -641,10 +641,10 @@ function showColorPicker() {
       colorPickerSetup = true;
     }
     
-    $("#mycolorpicker").css('display', 'block');
+    $("#mycolorpicker").fadeIn();
     colorPickerOpen = true;
     
     $("#colorpickerswatches li").removeClass('picked');
     $($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird
   } 
-}
\ No newline at end of file
+}