--- a/devtools/client/inspector/grids/actions/grids.js
+++ b/devtools/client/inspector/grids/actions/grids.js
@@ -13,17 +13,17 @@ const {
 module.exports = {
 
   /**
    * Update the color used for the grid's highlighter.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the DOM node to toggle the grid highlighter.
    * @param  {String} color
-   *         The color to use for thie nodeFront's grid highlighter.
+   *         The color to use for this nodeFront's grid highlighter.
    */
   updateGridColor(nodeFront, color) {
     return {
       type: UPDATE_GRID_COLOR,
       color,
       nodeFront,
     };
   },

--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -120,16 +120,43 @@ GridInspector.prototype = {
       onShowGridAreaHighlight: this.onShowGridAreaHighlight,
       onToggleGridHighlighter: this.onToggleGridHighlighter,
       onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
     };
   },
 
   /**
+   * Returns the initial color linked to a grid container. Will attempt to check the
+   * current grid highlighter state and the store.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need the color.
+   * @param  {String} fallbackColor
+   *         The color to use if no color could be found for the node front.
+   * @return {String} color
+   *         The color to use.
+   */
+  getInitialGridColor(nodeFront, fallbackColor) {
+    let highlighted = nodeFront == this.highlighters.gridHighlighterShown;
+
+    let color;
+    if (highlighted && this.highlighters.state.grid.options) {
+      // If the node front is currently highlighted, use the color from the highlighter
+      // options.
+      color = this.highlighters.state.grid.options.color;
+    } else {
+      // Otherwise use the color defined in the store for this node front.
+      color = this.getGridColorForNodeFront(nodeFront);
+    }
+
+    return color || fallbackColor;
+  },
+
+  /**
    * Returns the color set for the grid highlighter associated with the provided
    * nodeFront.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront for which we need the color.
    */
   getGridColorForNodeFront(nodeFront) {
     let { grids } = this.store.getState();
@@ -219,17 +246,17 @@ GridInspector.prototype = {
     }
 
     let grids = [];
     for (let i = 0; i < gridFronts.length; i++) {
       let grid = gridFronts[i];
       let nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
 
       let fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
-      let color = this.getGridColorForNodeFront(nodeFront) || fallbackColor;
+      let color = this.getInitialGridColor(nodeFront, fallbackColor);
 
       grids.push({
         id: i,
         color,
         gridFragments: grid.gridFragments,
         highlighted: nodeFront == this.highlighters.gridHighlighterShown,
         nodeFront,
       });
@@ -254,20 +281,24 @@ GridInspector.prototype = {
    * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
    * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state.
    *
    * @param  {Event} event
    *         Event that was triggered.
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the grid container element for which the grid highlighter
    *         is shown for.
+   * @param  {Object} options
+   *         The highlighter options used for the highlighter being shown/hidden.
    */
-  onHighlighterChange(event, nodeFront) {
+  onHighlighterChange(event, nodeFront, options) {
     let highlighted = event === "grid-highlighter-shown";
+    let { color } = options;
     this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
+    this.store.dispatch(updateGridColor(nodeFront, color));
   },
 
   /**
    * Handler for a change in the grid overlay color picker for a grid container.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element for which the grid color is
    *         being updated.

--- a/devtools/client/inspector/grids/reducers/grids.js
+++ b/devtools/client/inspector/grids/reducers/grids.js
@@ -23,18 +23,20 @@ let reducers = {
       return g;
     });
 
     return newGrids;
   },
 
   [UPDATE_GRID_HIGHLIGHTED](grids, { nodeFront, highlighted }) {
     return grids.map(g => {
+      let isUpdatedNode = g.nodeFront === nodeFront;
+
       return Object.assign({}, g, {
-        highlighted: g.nodeFront === nodeFront ? highlighted : false
+        highlighted: isUpdatedNode && highlighted
       });
     });
   },
 
   [UPDATE_GRIDS](_, { grids }) {
     return grids;
   },
 

--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -6,16 +6,18 @@
 
 "use strict";
 
 const promise = require("promise");
 const {Task} = require("devtools/shared/task");
 const EventEmitter = require("devtools/shared/event-emitter");
 const { VIEW_NODE_VALUE_TYPE } = require("devtools/client/inspector/shared/node-types");
 
+const DEFAULT_GRID_COLOR = "#4B0082";
+
 /**
  * Highlighters overlay is a singleton managing all highlighters in the Inspector.
  *
  * @param  {Inspector} inspector
  *         Inspector toolbox panel.
  */
 function HighlightersOverlay(inspector) {
   this.inspector = inspector;
@@ -136,17 +138,17 @@ HighlightersOverlay.prototype = {
     this._toggleRuleViewGridIcon(node, true);
 
     node.getUniqueSelector().then(selector => {
       // Save grid highlighter state.
       this.state.grid = { selector, options };
       this.gridHighlighterShown = node;
       // Emit the NodeFront of the grid container element that the grid highlighter was
       // shown for.
-      this.emit("grid-highlighter-shown", node);
+      this.emit("grid-highlighter-shown", node, options);
     }).catch(this._handleRejection);
   }),
 
   /**
    * Hide the grid highlighter for the given grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to unhighlight.
@@ -157,17 +159,18 @@ HighlightersOverlay.prototype = {
     }
 
     this._toggleRuleViewGridIcon(node, false);
 
     yield this.highlighters.CssGridHighlighter.hide();
 
     // Emit the NodeFront of the grid container element that the grid highlighter was
     // hidden for.
-    this.emit("grid-highlighter-hidden", this.gridHighlighterShown);
+    this.emit("grid-highlighter-hidden", this.gridHighlighterShown,
+      this.state.grid.options);
     this.gridHighlighterShown = null;
 
     // Erase grid highlighter state.
     this.state.grid = {};
   }),
 
   /**
    * Restore the saved highlighter states.
@@ -304,17 +307,19 @@ HighlightersOverlay.prototype = {
 
   onClick: function (event) {
     // Bail out if the target is not a grid property value.
     if (!this._isRuleViewDisplayGrid(event.target)) {
       return;
     }
 
     event.stopPropagation();
-    this.toggleGridHighlighter(this.inspector.selection.nodeFront);
+    this.toggleGridHighlighter(this.inspector.selection.nodeFront, {
+      color: DEFAULT_GRID_COLOR
+    });
   },
 
   onMouseMove: function (event) {
     // Bail out if the target is the same as for the last mousemove.
     if (event.target === this._lastHovered) {
       return;
     }