--- a/devtools/client/inspector/grids/test/head.js
+++ b/devtools/client/inspector/grids/test/head.js
@@ -22,17 +22,17 @@ registerCleanupFunction(() => {
 });
 
 const asyncStorage = require("devtools/shared/async-storage");
 const HIGHLIGHTER_TYPE = "CssGridHighlighter";
 
 /**
  * Simulate a color change in a given color picker tooltip.
  *
- * @param  {Spectrum|ColorWidget} colorPicker
+ * @param  {Spectrum} colorPicker
  *         The color picker widget.
  * @param  {Array} newRgba
  *         Array of the new rgba values to be set in the color widget.
  */
 var simulateColorPickerChange = async function(colorPicker, newRgba) {
   info("Getting the spectrum colorpicker object");
   let spectrum = await colorPicker.spectrum;
   info("Setting the new color");

--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -92,17 +92,16 @@ devtools.jar:
     content/framework/dev-edition-promo/dev-edition-logo.png (framework/dev-edition-promo/dev-edition-logo.png)
     content/inspector/inspector.xhtml (inspector/inspector.xhtml)
     content/framework/connect/connect.xhtml (framework/connect/connect.xhtml)
     content/framework/connect/connect.css (framework/connect/connect.css)
     content/framework/connect/connect.js (framework/connect/connect.js)
     content/shared/widgets/graphs-frame.xhtml (shared/widgets/graphs-frame.xhtml)
     content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
     content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
-    content/shared/widgets/color-widget.css (shared/widgets/color-widget.css)
     content/shared/widgets/spectrum.css (shared/widgets/spectrum.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
     content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
     content/aboutdebugging/initializer.js (aboutdebugging/initializer.js)
     content/responsive.html/index.xhtml (responsive.html/index.xhtml)
     content/responsive.html/index.js (responsive.html/index.js)
     content/dom/dom.html (dom/dom.html)
     content/dom/main.js (dom/main.js)

--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -412,54 +412,16 @@ inspector.sidebar.eventsViewTitle=Events
 # This is the title shown in a tab in the side panel of the Inspector panel
 # that corresponds to the tool displaying animations defined in the page.
 inspector.sidebar.animationInspectorTitle=Animations
 
 # LOCALIZATION NOTE (inspector.eyedropper.label): A string displayed as the tooltip of
 # a button in the inspector which toggles the Eyedropper tool
 inspector.eyedropper.label=Grab a color from the page
 
-# LOCALIZATION NOTE (inspector.colorwidget.colorNameLabel):
-# The label for the current color widget's color name field.
-inspector.colorwidget.colorNameLabel=Color Name:
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.header):
-# This string is used as a header to indicate the contrast section of the
-# color widget.
-inspector.colorwidget.contrastRatio.header=Contrast Ratio
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.invalidColor):
-# This string is used when an invalid color is passed as a background color
-# to the color widget.
-inspector.colorwidget.contrastRatio.invalidColor=Invalid color
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.info):
-# This string is used to explain the contrast ratio grading system when you hover over the help icon in the contrast info.
-inspector.colorwidget.contrastRatio.info=The contrast ratio grading system for text has the following grading: Fail, AA*, AAA* AAA from lowest to highest readability.\nIt was calculated based on the computed background color:
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.failGrade):
-# This string is used to indicate that the text fails for contrast ratio grading criteria.
-inspector.colorwidget.contrastRatio.failGrade=Fail
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.failInfo):
-# This string is used to explain that the text fails for contrast ratio grading criteria.
-inspector.colorwidget.contrastRatio.failInfo=This contrast ratio fails for all text sizes.
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.AABigInfo):
-# This string is used to explain that the text passes AA* grade for contrast ratio.
-inspector.colorwidget.contrastRatio.AABigInfo=This contrast ratio passes the AA grade for big text (at least 18 point or 14 point bold sized text).
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.AAABigInfo):
-# This string is used to explain that the text passes the AA grade and AAA* for contrast ratio.
-inspector.colorwidget.contrastRatio.AAABigInfo=This contrast ratio passes the AA grade for all text and AAA grade for big text (at least 18 point or 14 point bold sized text).
-
-# LOCALIZATION NOTE (inspector.colorwidget.contrastRatio.AAAInfo):
-# This string is used to explain that the text passes AAA grade for contrast ratio.
-inspector.colorwidget.contrastRatio.AAAInfo=This contrast ratio passes the AAA grade for all text sizes.
-
 # LOCALIZATION NOTE (inspector.breadcrumbs.label): A string visible only to a screen reader and
 # is used to label (using aria-label attribute) a container for inspector breadcrumbs
 inspector.breadcrumbs.label=Breadcrumbs
 
 # LOCALIZATION NOTE (inspector.browserStyles.label): This is the label for the checkbox
 # that specifies whether the styles that are not from the user's stylesheet should be
 # displayed or not.
 inspector.browserStyles.label=Browser styles

--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -55,18 +55,16 @@ pref("devtools.inspector.split-rule-enab
 // Collapse pseudo-elements by default in the rule-view
 pref("devtools.inspector.show_pseudo_elements", false);
 // The default size for image preview tooltips in the rule-view/computed-view/markup-view
 pref("devtools.inspector.imagePreviewTooltipSize", 300);
 // Enable user agent style inspection in rule-view
 pref("devtools.inspector.showUserAgentStyles", false);
 // Show all native anonymous content (like controls in <video> tags)
 pref("devtools.inspector.showAllAnonymousContent", false);
-// Enable the new color widget
-pref("devtools.inspector.colorWidget.enabled", false);
 // Enable the Flexbox highlighter
 pref("devtools.inspector.flexboxHighlighter.enabled", false);
 // Enable the CSS shapes highlighter
 pref("devtools.inspector.shapesHighlighter.enabled", true);
 // Enable the Changes View
 pref("devtools.changesview.enabled", false);
 // Enable the Events View
 pref("devtools.eventsview.enabled", false);

deleted file mode 100644
--- a/devtools/client/shared/widgets/ColorWidget.js
+++ /dev/null
@@ -1,685 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/**
- * This file is a new working copy of Spectrum.js for the purposes of refreshing the color
- * widget. It is hidden behind a pref("devtools.inspector.colorWidget.enabled").
- */
-
-"use strict";
-
-const EventEmitter = require("devtools/shared/event-emitter");
-const {colorUtils} = require("devtools/shared/css/color");
-const {LocalizationHelper} = require("devtools/shared/l10n");
-const L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");
-
-const XHTML_NS = "http://www.w3.org/1999/xhtml";
-const SAMPLE_TEXT = "Abc";
-
-/**
- * ColorWidget creates a color picker widget in any container you give it.
- *
- * Simple usage example:
- *
- * const {ColorWidget} = require("devtools/client/shared/widgets/ColorWidget");
- * let s = new ColorWidget(containerElement, [255, 126, 255, 1]);
- * s.on("changed", (rgba, color) => {
- *   console.log("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " +
- *     rgba[3] + ")");
- * });
- * s.show();
- * s.destroy();
- *
- * Note that the color picker is hidden by default and you need to call show to
- * make it appear. This 2 stages initialization helps in cases you are creating
- * the color picker in a parent element that hasn't been appended anywhere yet
- * or that is hidden. Calling show() when the parent element is appended and
- * visible will allow the color widget to correctly initialize its various parts.
- *
- * Fires the following events:
- * - changed : When the user changes the current color
- */
-function ColorWidget(parentEl, rgb) {
-  EventEmitter.decorate(this);
-
-  this.parentEl = parentEl;
-
-  this.onAlphaSliderMove = this.onAlphaSliderMove.bind(this);
-  this.onElementClick = this.onElementClick.bind(this);
-  this.onDraggerMove = this.onDraggerMove.bind(this);
-  this.onHexInputChange = this.onHexInputChange.bind(this);
-  this.onHslaInputChange = this.onHslaInputChange.bind(this);
-  this.onRgbaInputChange = this.onRgbaInputChange.bind(this);
-  this.onSelectValueChange = this.onSelectValueChange.bind(this);
-  this.onSliderMove = this.onSliderMove.bind(this);
-  this.updateContrast = this.updateContrast.bind(this);
-
-  this.initializeColorWidget();
-
-  if (rgb) {
-    this.rgb = rgb;
-    this.updateUI();
-  }
-}
-
-module.exports.ColorWidget = ColorWidget;
-
-/**
- * Calculates the contrast grade and title for the given contrast
- * ratio and background color.
- * @param {Number} contrastRatio Contrast ratio to calculate grade.
- * @param {String} backgroundColor A string of the form `rgba(r, g, b, a)`
- * where r, g, b and a are floats.
- * @return {Object} An object of the form {grade, title}.
- * |grade| is a string containing the contrast grade.
- * |title| is a string containing the title of the colorwidget.
- */
-ColorWidget.calculateGradeAndTitle = function(contrastRatio, backgroundColor) {
-  let grade = "";
-  let title = "";
-
-  if (contrastRatio < 3.0) {
-    grade = L10N.getStr("inspector.colorwidget.contrastRatio.failGrade");
-    title = L10N.getStr("inspector.colorwidget.contrastRatio.failInfo");
-  } else if (contrastRatio < 4.5) {
-    grade = "AA*";
-    title = L10N.getStr("inspector.colorwidget.contrastRatio.AABigInfo");
-  } else if (contrastRatio < 7.0) {
-    grade = "AAA*";
-    title = L10N.getStr("inspector.colorwidget.contrastRatio.AAABigInfo");
-  } else if (contrastRatio < 22.0) {
-    grade = "AAA";
-    title = L10N.getStr("inspector.colorwidget.contrastRatio.AAAInfo");
-  }
-  title += "\n";
-  title += L10N.getStr("inspector.colorwidget.contrastRatio.info") + " ";
-  title += backgroundColor;
-
-  return { grade, title };
-};
-
-/**
- * Converts the contrastRatio to a string of length 4 by rounding
- * contrastRatio and padding the required number of 0s before or
- * after.
- * @param {Number} contrastRatio The contrast ratio to be formatted.
- * @return {String} The formatted ratio.
- */
-ColorWidget.ratioToString = function(contrastRatio) {
-  let formattedRatio = (contrastRatio < 10) ? "0" : "";
-  formattedRatio += contrastRatio.toFixed(2);
-  return formattedRatio;
-};
-
-ColorWidget.hsvToRgb = function(h, s, v, a) {
-  let r, g, b;
-
-  let i = Math.floor(h * 6);
-  let f = h * 6 - i;
-  let p = v * (1 - s);
-  let q = v * (1 - f * s);
-  let t = v * (1 - (1 - f) * s);
-
-  switch (i % 6) {
-    case 0: r = v; g = t; b = p; break;
-    case 1: r = q; g = v; b = p; break;
-    case 2: r = p; g = v; b = t; break;
-    case 3: r = p; g = q; b = v; break;
-    case 4: r = t; g = p; b = v; break;
-    case 5: r = v; g = p; b = q; break;
-  }
-
-  return [r * 255, g * 255, b * 255, a];
-};
-
-ColorWidget.rgbToHsv = function(r, g, b, a) {
-  r = r / 255;
-  g = g / 255;
-  b = b / 255;
-
-  let max = Math.max(r, g, b), min = Math.min(r, g, b);
-  let h, s, v = max;
-
-  let d = max - min;
-  s = max == 0 ? 0 : d / max;
-
-  if (max == min) {
-    // achromatic
-    h = 0;
-  } else {
-    switch (max) {
-      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-      case g: h = (b - r) / d + 2; break;
-      case b: h = (r - g) / d + 4; break;
-    }
-    h /= 6;
-  }
-  return [h, s, v, a];
-};
-
-ColorWidget.hslToCssString = function(h, s, l, a) {
-  return `hsla(${h}, ${s}%, ${l}%, ${a})`;
-};
-
-ColorWidget.draggable = function(element, onmove, onstart, onstop) {
-  onmove = onmove || function() {};
-  onstart = onstart || function() {};
-  onstop = onstop || function() {};
-
-  let doc = element.ownerDocument;
-  let dragging = false;
-  let offset = {};
-  let maxHeight = 0;
-  let maxWidth = 0;
-
-  function prevent(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  }
-
-  function move(e) {
-    if (dragging) {
-      if (e.buttons === 0) {
-        // The button is no longer pressed but we did not get a mouseup event.
-        stop();
-        return;
-      }
-      let pageX = e.pageX;
-      let pageY = e.pageY;
-
-      let dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
-      let dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
-
-      onmove.apply(element, [dragX, dragY]);
-    }
-  }
-
-  function start(e) {
-    let rightclick = e.which === 3;
-
-    if (!rightclick && !dragging) {
-      if (onstart.apply(element, arguments) !== false) {
-        dragging = true;
-        maxHeight = element.offsetHeight;
-        maxWidth = element.offsetWidth;
-
-        offset = element.getBoundingClientRect();
-
-        move(e);
-
-        doc.addEventListener("selectstart", prevent);
-        doc.addEventListener("dragstart", prevent);
-        doc.addEventListener("mousemove", move);
-        doc.addEventListener("mouseup", stop);
-
-        prevent(e);
-      }
-    }
-  }
-
-  function stop() {
-    if (dragging) {
-      doc.removeEventListener("selectstart", prevent);
-      doc.removeEventListener("dragstart", prevent);
-      doc.removeEventListener("mousemove", move);
-      doc.removeEventListener("mouseup", stop);
-      onstop.apply(element, arguments);
-    }
-    dragging = false;
-  }
-
-  element.addEventListener("mousedown", start);
-};
-
-ColorWidget.prototype = {
-  set rgb(color) {
-    this.hsv = ColorWidget.rgbToHsv(color[0], color[1], color[2], color[3]);
-
-    let { h, s, l } = new colorUtils.CssColor(this.rgbCssString)._getHSLATuple();
-    this.hsl = [h, s, l, color[3]];
-  },
-
-  get rgb() {
-    let rgb = ColorWidget.hsvToRgb(this.hsv[0], this.hsv[1], this.hsv[2],
-      this.hsv[3]);
-    return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]),
-            Math.round(rgb[3] * 100) / 100];
-  },
-
-  get rgbNoSatVal() {
-    let rgb = ColorWidget.hsvToRgb(this.hsv[0], 1, 1);
-    return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), rgb[3]];
-  },
-
-  get rgbCssString() {
-    let rgb = this.rgb;
-    return "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " +
-      rgb[3] + ")";
-  },
-
-  initializeColorWidget: function() {
-    let colorNameLabel = L10N.getStr("inspector.colorwidget.colorNameLabel");
-    this.parentEl.innerHTML = "";
-    this.element = this.parentEl.ownerDocument.createElementNS(XHTML_NS, "div");
-
-    this.element.className = "colorwidget-container";
-    // eslint-disable-next-line no-unsanitized/property
-    this.element.innerHTML = `
-      <div class="colorwidget-top">
-        <div class="colorwidget-fill"></div>
-        <div class="colorwidget-top-inner">
-          <div class="colorwidget-color colorwidget-box">
-            <div class="colorwidget-sat">
-              <div class="colorwidget-val">
-                <div class="colorwidget-dragger"></div>
-              </div>
-            </div>
-          </div>
-          <div class="colorwidget-hue colorwidget-box">
-            <div class="colorwidget-slider colorwidget-slider-control"></div>
-          </div>
-        </div>
-      </div>
-      <div class="colorwidget-alpha colorwidget-checker colorwidget-box">
-        <div class="colorwidget-alpha-inner">
-          <div class="colorwidget-alpha-handle colorwidget-slider-control"></div>
-        </div>
-      </div>
-      <div class="colorwidget-value">
-        <select class="colorwidget-select">
-          <option value="hex">Hex</option>
-          <option value="rgba">RGBA</option>
-          <option value="hsla">HSLA</option>
-        </select>
-        <div class="colorwidget-hex">
-          <input class="colorwidget-hex-input"/>
-        </div>
-        <div class="colorwidget-rgba colorwidget-hidden">
-          <input class="colorwidget-rgba-r" data-id="r" />
-          <input class="colorwidget-rgba-g" data-id="g" />
-          <input class="colorwidget-rgba-b" data-id="b" />
-          <input class="colorwidget-rgba-a" data-id="a" />
-        </div>
-        <div class="colorwidget-hsla colorwidget-hidden">
-          <input class="colorwidget-hsla-h" data-id="h" />
-          <input class="colorwidget-hsla-s" data-id="s" />
-          <input class="colorwidget-hsla-l" data-id="l" />
-          <input class="colorwidget-hsla-a" data-id="a" />
-        </div>
-      </div>
-      <div class="colorwidget-colorname">
-        <label class="colorwidget-colorname-label">${colorNameLabel}</label>
-        <span class="colorwidget-colorname-value"></span>
-      </div>
-    <div class="colorwidget-contrast">
-      <div class="colorwidget-contrast-info"></div>
-      <div class="colorwidget-contrast-inner">
-        <span class="colorwidget-colorswatch"></span>
-        <span class="colorwidget-contrast-ratio"></span>
-        <span class="colorwidget-contrast-grade"></span>
-        <button class="colorwidget-contrast-help devtools-button"></button>
-      </div>
-    </div>
-    `;
-
-    this.element.addEventListener("click", this.onElementClick);
-
-    this.parentEl.appendChild(this.element);
-
-    this.closestBackgroundColor = "rgba(255, 255, 255, 1)";
-
-    this.colorName = this.element.querySelector(".colorwidget-colorname-value");
-
-    this.contrast = this.element.querySelector(".colorwidget-contrast");
-    this.contrastInfo = this.element.querySelector(".colorwidget-contrast-info");
-    this.contrastInfo.textContent = L10N.getStr(
-      "inspector.colorwidget.contrastRatio.header"
-    );
-
-    this.contrastInner = this.element.querySelector(".colorwidget-contrast-inner");
-    this.contrastSwatch = this.contrastInner.querySelector(".colorwidget-colorswatch");
-
-    this.contrastSwatch.textContent = SAMPLE_TEXT;
-
-    this.contrastRatio = this.contrastInner.querySelector(".colorwidget-contrast-ratio");
-    this.contrastGrade = this.contrastInner.querySelector(".colorwidget-contrast-grade");
-    this.contrastHelp = this.contrastInner.querySelector(".colorwidget-contrast-help");
-
-    this.slider = this.element.querySelector(".colorwidget-hue");
-    this.slideHelper = this.element.querySelector(".colorwidget-slider");
-    ColorWidget.draggable(this.slider, this.onSliderMove);
-
-    this.dragger = this.element.querySelector(".colorwidget-color");
-    this.dragHelper = this.element.querySelector(".colorwidget-dragger");
-    ColorWidget.draggable(this.dragger, this.onDraggerMove);
-
-    this.alphaSlider = this.element.querySelector(".colorwidget-alpha");
-    this.alphaSliderInner = this.element.querySelector(".colorwidget-alpha-inner");
-    this.alphaSliderHelper = this.element.querySelector(".colorwidget-alpha-handle");
-    ColorWidget.draggable(this.alphaSliderInner, this.onAlphaSliderMove);
-
-    this.colorSelect = this.element.querySelector(".colorwidget-select");
-    this.colorSelect.addEventListener("change", this.onSelectValueChange);
-
-    this.hexValue = this.element.querySelector(".colorwidget-hex");
-    this.hexValueInput = this.element.querySelector(".colorwidget-hex-input");
-    this.hexValueInput.addEventListener("input", this.onHexInputChange);
-
-    this.rgbaValue = this.element.querySelector(".colorwidget-rgba");
-    this.rgbaValueInputs = {
-      r: this.element.querySelector(".colorwidget-rgba-r"),
-      g: this.element.querySelector(".colorwidget-rgba-g"),
-      b: this.element.querySelector(".colorwidget-rgba-b"),
-      a: this.element.querySelector(".colorwidget-rgba-a"),
-    };
-    this.rgbaValue.addEventListener("input", this.onRgbaInputChange);
-
-    this.hslaValue = this.element.querySelector(".colorwidget-hsla");
-    this.hslaValueInputs = {
-      h: this.element.querySelector(".colorwidget-hsla-h"),
-      s: this.element.querySelector(".colorwidget-hsla-s"),
-      l: this.element.querySelector(".colorwidget-hsla-l"),
-      a: this.element.querySelector(".colorwidget-hsla-a"),
-    };
-    this.hslaValue.addEventListener("input", this.onHslaInputChange);
-  },
-
-  async show() {
-    this.initializeColorWidget();
-    this.element.classList.add("colorwidget-show");
-
-    this.slideHeight = this.slider.offsetHeight;
-    this.dragWidth = this.dragger.offsetWidth;
-    this.dragHeight = this.dragger.offsetHeight;
-    this.dragHelperHeight = this.dragHelper.offsetHeight;
-    this.slideHelperHeight = this.slideHelper.offsetHeight;
-    this.alphaSliderWidth = this.alphaSliderInner.offsetWidth;
-    this.alphaSliderHelperWidth = this.alphaSliderHelper.offsetWidth;
-
-    if (this.inspector && this.inspector.selection.nodeFront && this.contrastEnabled) {
-      let node = this.inspector.selection.nodeFront;
-      this.closestBackgroundColor = await node.getClosestBackgroundColor();
-    }
-    this.updateContrast();
-
-    this.updateUI();
-  },
-
-  onElementClick: function(e) {
-    e.stopPropagation();
-  },
-
-  onSliderMove: function(dragX, dragY) {
-    this.hsv[0] = (dragY / this.slideHeight);
-    this.hsl[0] = (dragY / this.slideHeight) * 360;
-    this.updateUI();
-    this.onChange();
-  },
-
-  onDraggerMove: function(dragX, dragY) {
-    this.hsv[1] = dragX / this.dragWidth;
-    this.hsv[2] = (this.dragHeight - dragY) / this.dragHeight;
-
-    this.hsl[2] = ((2 - this.hsv[1]) * this.hsv[2] / 2);
-    if (this.hsl[2] && this.hsl[2] < 1) {
-      this.hsl[1] = this.hsv[1] * this.hsv[2] /
-          (this.hsl[2] < 0.5 ? this.hsl[2] * 2 : 2 - this.hsl[2] * 2);
-      this.hsl[1] = this.hsl[1] * 100;
-    }
-    this.hsl[2] = this.hsl[2] * 100;
-
-    this.updateUI();
-    this.onChange();
-  },
-
-  onAlphaSliderMove: function(dragX, dragY) {
-    this.hsv[3] = dragX / this.alphaSliderWidth;
-    this.hsl[3] = dragX / this.alphaSliderWidth;
-    this.updateUI();
-    this.onChange();
-  },
-
-  onSelectValueChange: function(event) {
-    const selection = event.target.value;
-    this.colorSelect.classList.remove("colorwidget-select-spacing");
-    this.hexValue.classList.add("colorwidget-hidden");
-    this.rgbaValue.classList.add("colorwidget-hidden");
-    this.hslaValue.classList.add("colorwidget-hidden");
-
-    switch (selection) {
-      case "hex":
-        this.hexValue.classList.remove("colorwidget-hidden");
-        break;
-      case "rgba":
-        this.colorSelect.classList.add("colorwidget-select-spacing");
-        this.rgbaValue.classList.remove("colorwidget-hidden");
-        break;
-      case "hsla":
-        this.colorSelect.classList.add("colorwidget-select-spacing");
-        this.hslaValue.classList.remove("colorwidget-hidden");
-        break;
-    }
-  },
-
-  onHexInputChange: function(event) {
-    const hex = event.target.value;
-    const color = new colorUtils.CssColor(hex, true);
-    if (!color.rgba) {
-      return;
-    }
-
-    const { r, g, b, a } = color.getRGBATuple();
-    this.rgb = [r, g, b, a];
-    this.updateUI();
-    this.onChange();
-  },
-
-  onRgbaInputChange: function(event) {
-    const field = event.target.dataset.id;
-    const value = event.target.value.toString();
-    if (!value || isNaN(value) || value.endsWith(".")) {
-      return;
-    }
-
-    let rgb = this.rgb;
-
-    switch (field) {
-      case "r":
-        rgb[0] = value;
-        break;
-      case "g":
-        rgb[1] = value;
-        break;
-      case "b":
-        rgb[2] = value;
-        break;
-      case "a":
-        rgb[3] = Math.min(value, 1);
-        break;
-    }
-
-    this.rgb = rgb;
-
-    this.updateUI();
-    this.onChange();
-  },
-
-  onHslaInputChange: function(event) {
-    const field = event.target.dataset.id;
-    let value = event.target.value.toString();
-    if ((field === "s" || field === "l") && !value.endsWith("%")) {
-      return;
-    }
-
-    if (value.endsWith("%")) {
-      value = value.substring(0, value.length - 1);
-    }
-
-    if (!value || isNaN(value) || value.endsWith(".")) {
-      return;
-    }
-
-    const hsl = this.hsl;
-
-    switch (field) {
-      case "h":
-        hsl[0] = value;
-        break;
-      case "s":
-        hsl[1] = value;
-        break;
-      case "l":
-        hsl[2] = value;
-        break;
-      case "a":
-        hsl[3] = Math.min(value, 1);
-        break;
-    }
-
-    const cssString = ColorWidget.hslToCssString(hsl[0], hsl[1], hsl[2], hsl[3]);
-    const { r, g, b, a } = new colorUtils.CssColor(cssString).getRGBATuple();
-
-    this.rgb = [r, g, b, a];
-
-    this.hsl = hsl;
-
-    this.updateUI();
-    this.onChange();
-  },
-
-  onChange: function() {
-    this.updateContrast();
-    this.emit("changed", this.rgb, this.rgbCssString);
-  },
-
-  updateContrast: function() {
-    if (!this.contrastEnabled) {
-      this.contrast.style.display = "none";
-      return;
-    }
-
-    this.contrast.style.display = "initial";
-
-    if (!colorUtils.isValidCSSColor(this.closestBackgroundColor)) {
-      this.contrastRatio.textContent = L10N.getStr(
-        "inspector.colorwidget.contrastRatio.invalidColor"
-      );
-
-      this.contrastGrade.textContent = "";
-      this.contrastHelp.removeAttribute("title");
-      return;
-    }
-    if (!this.rgbaColor) {
-      this.rgbaColor = new colorUtils.CssColor(this.closestBackgroundColor);
-    }
-    this.rgbaColor.newColor(this.closestBackgroundColor);
-    let rgba = this.rgbaColor.getRGBATuple();
-    let backgroundColor = [rgba.r, rgba.g, rgba.b, rgba.a];
-
-    let textColor = this.rgb;
-
-    let ratio = colorUtils.calculateContrastRatio(backgroundColor, textColor);
-
-    let contrastDetails = ColorWidget.calculateGradeAndTitle(ratio,
-                        this.rgbaColor.toString());
-
-    this.contrastRatio.textContent = ColorWidget.ratioToString(ratio);
-    this.contrastGrade.textContent = contrastDetails.grade;
-
-    this.contrastHelp.setAttribute("title", contrastDetails.title);
-
-    this.contrastSwatch.style.backgroundColor = this.rgbaColor.toString();
-    this.contrastSwatch.style.color = this.rgbCssString;
-  },
-
-  updateHelperLocations: function() {
-    // If the UI hasn't been shown yet then none of the dimensions will be
-    // correct
-    if (!this.element.classList.contains("colorwidget-show")) {
-      return;
-    }
-
-    let h = this.hsv[0];
-    let s = this.hsv[1];
-    let v = this.hsv[2];
-
-    // Placing the color dragger
-    let dragX = s * this.dragWidth;
-    let dragY = this.dragHeight - (v * this.dragHeight);
-    let helperDim = this.dragHelperHeight / 2;
-
-    dragX = Math.max(
-      -helperDim,
-      Math.min(this.dragWidth - helperDim, dragX - helperDim)
-    );
-    dragY = Math.max(
-      -helperDim,
-      Math.min(this.dragHeight - helperDim, dragY - helperDim)
-    );
-
-    this.dragHelper.style.top = dragY + "px";
-    this.dragHelper.style.left = dragX + "px";
-
-    // Placing the hue slider
-    let slideY = (h * this.slideHeight) - this.slideHelperHeight / 2;
-    this.slideHelper.style.top = slideY + "px";
-
-    // Placing the alpha slider
-    let alphaSliderX = (this.hsv[3] * this.alphaSliderWidth) -
-      (this.alphaSliderHelperWidth / 2);
-    this.alphaSliderHelper.style.left = alphaSliderX + "px";
-
-    const color = new colorUtils.CssColor(this.rgbCssString);
-
-    // Updating the hex field
-    this.hexValueInput.value = color.hex;
-
-    // Updating the RGBA fields
-    const rgb = this.rgb;
-    this.rgbaValueInputs.r.value = rgb[0];
-    this.rgbaValueInputs.g.value = rgb[1];
-    this.rgbaValueInputs.b.value = rgb[2];
-    this.rgbaValueInputs.a.value = parseFloat(rgb[3].toFixed(1));
-
-    // Updating the HSLA fields
-    this.hslaValueInputs.h.value = this.hsl[0];
-    this.hslaValueInputs.s.value = this.hsl[1] + "%";
-    this.hslaValueInputs.l.value = this.hsl[2] + "%";
-    this.hslaValueInputs.a.value = parseFloat(this.hsl[3].toFixed(1));
-  },
-
-  updateUI: function() {
-    this.updateHelperLocations();
-
-    let rgb = this.rgb;
-    let rgbNoSatVal = this.rgbNoSatVal;
-
-    let flatColor = "rgb(" + rgbNoSatVal[0] + ", " + rgbNoSatVal[1] + ", " +
-      rgbNoSatVal[2] + ")";
-
-    this.dragger.style.backgroundColor = flatColor;
-
-    let rgbNoAlpha = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
-    let rgbAlpha0 = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ", 0)";
-    let alphaGradient = "linear-gradient(to right, " + rgbAlpha0 + ", " +
-      rgbNoAlpha + ")";
-    this.alphaSliderInner.style.background = alphaGradient;
-
-    let colorName = colorUtils.rgbToColorName(rgb[0], rgb[1], rgb[2]);
-    this.colorName.textContent = colorName || "---";
-  },
-
-  destroy: function() {
-    this.element.removeEventListener("click", this.onElementClick);
-
-    this.parentEl.removeChild(this.element);
-
-    this.slider = null;
-    this.dragger = null;
-    this.alphaSlider = this.alphaSliderInner = this.alphaSliderHelper = null;
-    this.parentEl = null;
-    this.element = null;
-    this.colorName = null;
-  }
-};

deleted file mode 100644
--- a/devtools/client/shared/widgets/color-widget.css
+++ /dev/null
@@ -1,254 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-#eyedropper-button {
-  margin-inline-start: 5px;
-  display: block;
-}
-
-#eyedropper-button::before {
-  background-image: url(chrome://devtools/skin/images/command-eyedropper.svg);
-}
-
-/* Mix-in classes */
-
-.colorwidget-checker {
-  background-color: #eee;
-  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
-    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
-  background-size: 12px 12px;
-  background-position: 0 0, 6px 6px;
-}
-
-.colorwidget-slider-control {
-  cursor: pointer;
-  box-shadow: 0 0 2px rgba(0,0,0,.6);
-  background: #fff;
-  border-radius: 10px;
-  opacity: .8;
-}
-
-.colorwidget-box {
-  border: 1px solid rgba(0,0,0,0.2);
-  border-radius: 2px;
-  background-clip: content-box;
-}
-
-.colorwidget-colorswatch {
-  background-color: transparent;
-  color: transparent;
-  border: 1px solid transparent;
-}
-
-/* Elements */
-
-#colorwidget-tooltip {
-  padding: 4px;
-}
-
-.colorwidget-container {
-  position: relative;
-  display: none;
-  top: 0;
-  left: 0;
-  border-radius: 0;
-  width: 200px;
-  padding: 5px;
-}
-
-.colorwidget-show {
-  display: inline-block;
-}
-
-/* Keep aspect ratio:
-http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
-.colorwidget-top {
-  position: relative;
-  width: 100%;
-  display: inline-block;
-}
-
-.colorwidget-top-inner {
-  position: absolute;
-  top:0;
-  left:0;
-  bottom:0;
-  right:0;
-}
-
-.colorwidget-contrast {
-  color: var(--theme-content-color1);
-  padding-top: 4px;
-}
-
-.colorwidget-colorswatch, .colorwidget-contrast-ratio, .colorwidget-contrast-grade, .colorwidget-contrast-help {
-  display: inline-block;
-}
-
-.colorwidget-colorswatch {
-  width: 28%;
-}
-
-.colorwidget-contrast-ratio {
-  font-family: Courier New, Courier, monospace;
-  padding-left: 8px;
-  width: 26%;
-}
-
-.colorwidget-contrast-grade {
-  font-family: Courier New, Courier, monospace;
-  width: 18%;
-}
-
-.colorwidget-contrast-help {
-  margin-inline-start: 5px;
-}
-
-.colorwidget-contrast-help::before {
-  background-image: url(chrome://devtools/skin/images/help.svg);
-}
-
-.colorwidget-colorswatch {
-  text-align: center;
-  color: transparent;
-}
-
-.colorwidget-color {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 20%;
-}
-
-.colorwidget-hue {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 83%;
-}
-
-.colorwidget-fill {
-  /* Same as colorwidget-color width */
-  margin-top: 85%;
-}
-
-.colorwidget-sat, .colorwidget-val {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.colorwidget-dragger, .colorwidget-slider {
-  -moz-user-select: none;
-}
-
-.colorwidget-alpha {
-  position: relative;
-  height: 8px;
-  margin-top: 3px;
-}
-
-.colorwidget-alpha-inner {
-  height: 100%;
-}
-
-.colorwidget-alpha-handle {
-  position: absolute;
-  top: -3px;
-  bottom: -3px;
-  width: 5px;
-  left: 50%;
-}
-
-.colorwidget-sat {
-  background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
-}
-
-.colorwidget-val {
-  background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0));
-}
-
-.colorwidget-hue {
-  background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-}
-
-.colorwidget-dragger {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  cursor: pointer;
-  border-radius: 50%;
-  height: 8px;
-  width: 8px;
-  border: 1px solid white;
-  box-shadow: 0 0 2px rgba(0,0,0,.6);
-}
-
-.colorwidget-slider {
-  position: absolute;
-  top: 0;
-  height: 5px;
-  left: -3px;
-  right: -3px;
-}
-
-/**
- * Color Widget Editor
- */
-
-.colorwidget-value {
-  position: relative;
-  margin-top: 8px;
-}
-
-/**
- * Color Widget Select
- */
-
-.colorwidget-select {
-  width: 100%;
-}
-
-.colorwidget-select-spacing {
-  letter-spacing: 40px;
-}
-
-.colorwidget-select-spacing option {
-  letter-spacing: initial;
-}
-
-/**
- * Color Widget Inputs
- */
-
-.colorwidget-hidden {
-  display: none;
-}
-
-.colorwidget-hex,
-.colorwidget-rgba,
-.colorwidget-hsla {
-  width: 200px;
-  font-size: 0;
-}
-
-.colorwidget-hex-input {
-  width: 192px;
-}
-
-.colorwidget-rgba-r,
-.colorwidget-rgba-g,
-.colorwidget-rgba-b,
-.colorwidget-rgba-a,
-.colorwidget-hsla-h,
-.colorwidget-hsla-s,
-.colorwidget-hsla-l,
-.colorwidget-hsla-a {
-  width: 42px;
-  margin: 0;
-}
\ No newline at end of file

--- a/devtools/client/shared/widgets/moz.build
+++ b/devtools/client/shared/widgets/moz.build
@@ -8,17 +8,16 @@ DIRS += [
     'tooltip',
 ]
 
 DevToolsModules(
     'AbstractTreeItem.jsm',
     'BarGraphWidget.js',
     'BreadcrumbsWidget.jsm',
     'Chart.js',
-    'ColorWidget.js',
     'CubicBezierPresets.js',
     'CubicBezierWidget.js',
     'FastListWidget.js',
     'FilterWidget.js',
     'FlameGraph.js',
     'Graphs.js',
     'GraphsWorker.js',
     'LineGraphWidget.js',

--- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -1,24 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const Services = require("Services");
 const {colorUtils} = require("devtools/shared/css/color");
-const {ColorWidget} = require("devtools/client/shared/widgets/ColorWidget");
 const {Spectrum} = require("devtools/client/shared/widgets/Spectrum");
 const SwatchBasedEditorTooltip = require("devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip");
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");
 
-const colorWidgetPref = "devtools.inspector.colorWidget.enabled";
-const NEW_COLOR_WIDGET = Services.prefs.getBoolPref(colorWidgetPref);
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 
 /**
  * The swatch color picker tooltip class is a specific class meant to be used
  * along with output-parser's generated color swatches.
  * It extends the parent SwatchBasedEditorTooltip class.
  * It just wraps a standard Tooltip and sets its content with an instance of a
  * color picker.
@@ -53,29 +49,24 @@ class SwatchColorPickerTooltip extends S
 
   setColorPickerContent(color) {
     let { doc } = this.tooltip;
 
     let container = doc.createElementNS(XHTML_NS, "div");
     container.id = "spectrum-tooltip";
 
     let widget;
-    let node = doc.createElementNS(XHTML_NS, "div");
 
-    if (NEW_COLOR_WIDGET) {
-      node.id = "colorwidget";
-      container.appendChild(node);
-      widget = new ColorWidget(node, color);
-      this.tooltip.setContent(container, { width: 218, height: 320 });
-    } else {
-      node.id = "spectrum";
-      container.appendChild(node);
-      widget = new Spectrum(node, color);
-      this.tooltip.setContent(container, { width: 218, height: 224 });
-    }
+    let node = doc.createElementNS(XHTML_NS, "div");
+    node.id = "spectrum";
+    container.appendChild(node);
+
+    widget = new Spectrum(node, color);
+    this.tooltip.setContent(container, { width: 218, height: 224 });
+
     widget.inspector = this.inspector;
 
     let eyedropper = doc.createElementNS(XHTML_NS, "button");
     eyedropper.id = "eyedropper-button";
     eyedropper.className = "devtools-button";
     /* pointerEvents for eyedropper has to be set auto to display tooltip when
      * eyedropper is disabled in non-HTML documents.
      */

--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -1,15 +1,14 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Import stylesheets for specific tooltip widgets */
-@import url(chrome://devtools/content/shared/widgets/color-widget.css);
 @import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
 @import url(chrome://devtools/content/shared/widgets/filter-widget.css);
 @import url(chrome://devtools/content/shared/widgets/spectrum.css);
 
 /* Tooltip specific theme variables */
 
 .theme-dark {
   --bezier-diagonal-color: #eee;