--- a/devtools/client/shared/test/unit/test_cssColor.js
+++ b/devtools/client/shared/test/unit/test_cssColor.js
@@ -57,9 +57,20 @@ function run_test() {
 
     // Check that our implementation matches DOMUtils.
     compareWithDomutils(test.input, true);
 
     // And check some obvious errors.
     compareWithDomutils("mumble" + test.input, false);
     compareWithDomutils(test.input + "trailingstuff", false);
   }
+
+  // Regression test for bug 1303826.
+  let black = new colorUtils.CssColor("#000");
+  black.colorUnit = "name";
+  equal(black.toString(), "black", "test non-upper-case color cycling");
+
+  let upper = new colorUtils.CssColor("BLACK");
+  upper.colorUnit = "hex";
+  equal(upper.toString(), "#000", "test upper-case color cycling");
+  upper.colorUnit = "name";
+  equal(upper.toString(), "BLACK", "test upper-case color preservation");
 }

--- a/devtools/shared/css/color.js
+++ b/devtools/shared/css/color.js
@@ -84,22 +84,29 @@ CssColor.prototype = {
   _colorUnit: null,
   _colorUnitUppercase: false,
 
   // The value as-authored.
   authored: null,
   // A lower-cased copy of |authored|.
   lowerCased: null,
 
+  _setColorUnitUppercase: function (color) {
+    // Specifically exclude the case where the color is
+    // case-insensitive.  This makes it so that "#000" isn't
+    // considered "upper case" for the purposes of color cycling.
+    this._colorUnitUppercase = (color === color.toUpperCase()) &&
+      (color !== color.toLowerCase());
+  },
+
   get colorUnit() {
     if (this._colorUnit === null) {
       let defaultUnit = Services.prefs.getCharPref(COLOR_UNIT_PREF);
       this._colorUnit = CssColor.COLORUNIT[defaultUnit];
-      this._colorUnitUppercase =
-        (this.authored === this.authored.toUpperCase());
+      this._setColorUnitUppercase(this.authored);
     }
     return this._colorUnit;
   },
 
   set colorUnit(unit) {
     this._colorUnit = unit;
   },
 
@@ -109,17 +116,17 @@ CssColor.prototype = {
    * color unit untouched.
    *
    * @param {String} color The color to use
    */
   setAuthoredUnitFromColor: function (color) {
     if (Services.prefs.getCharPref(COLOR_UNIT_PREF) ===
         CssColor.COLORUNIT.authored) {
       this._colorUnit = classifyColor(color);
-      this._colorUnitUppercase = (color === color.toUpperCase());
+      this._setColorUnitUppercase(color);
     }
   },
 
   get hasAlpha() {
     if (!this.valid) {
       return false;
     }
     return this._getRGBATuple().a !== 1;
@@ -316,16 +323,17 @@ CssColor.prototype = {
    *         Any valid color string
    */
   newColor: function (color) {
     // Store a lower-cased version of the color to help with format
     // testing.  The original text is kept as well so it can be
     // returned when needed.
     this.lowerCased = color.toLowerCase();
     this.authored = color;
+    this._setColorUnitUppercase(color);
     return this;
   },
 
   nextColorUnit: function () {
     // Reorder the formats array to have the current format at the
     // front so we can cycle through.
     let formats = ["hex", "hsl", "rgb", "name"];
     let currentFormat = classifyColor(this.toString());