diff --git a/popup/popup.css b/popup/popup.css
index 52b30fd..d95a9be 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -82,13 +82,14 @@ fieldset label {
   font-size: 12px;
 }
 
-fieldset input[type="color"] {
+fieldset .rt-color-swatch {
   width: 40px;
   height: 24px;
   border: 1px solid #ccc;
   border-radius: 3px;
-  padding: 1px;
   cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 fieldset input[type="text"] {
@@ -201,6 +202,14 @@ fieldset input[type="text"] {
   align-items: center;
 }
 
+.subreddit-entry-colors .rt-color-swatch {
+  width: 40px;
+  height: 24px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
 /* --- Color Picker Widget --- */
 .rt-color-picker {
   margin: 8px 0;
diff --git a/popup/popup.html b/popup/popup.html
index 64132c0..fc65913 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -28,15 +28,15 @@
       <h2>Light Mode Colors</h2>
       <fieldset>
         <legend>Subreddit Badge</legend>
-        <label>Background <input type="color" id="light.subredditBgColor"></label>
-        <label>Border <input type="color" id="light.subredditBorderColor"></label>
-        <label>Text <input type="color" id="light.subredditTextColor"></label>
+        <label>Background <div class="rt-color-swatch" id="light.subredditBgColor"></div></label>
+        <label>Border <div class="rt-color-swatch" id="light.subredditBorderColor"></div></label>
+        <label>Text <div class="rt-color-swatch" id="light.subredditTextColor"></div></label>
       </fieldset>
       <fieldset>
         <legend>Comments Badge</legend>
-        <label>Background <input type="color" id="light.commentsBgColor"></label>
-        <label>Border <input type="color" id="light.commentsBorderColor"></label>
-        <label>Text <input type="color" id="light.commentsTextColor"></label>
+        <label>Background <div class="rt-color-swatch" id="light.commentsBgColor"></div></label>
+        <label>Border <div class="rt-color-swatch" id="light.commentsBorderColor"></div></label>
+        <label>Text <div class="rt-color-swatch" id="light.commentsTextColor"></div></label>
       </fieldset>
       <button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
     </div>
@@ -45,15 +45,15 @@
       <h2>Dark Mode Colors</h2>
       <fieldset>
         <legend>Subreddit Badge</legend>
-        <label>Background <input type="color" id="dark.subredditBgColor"></label>
-        <label>Border <input type="color" id="dark.subredditBorderColor"></label>
-        <label>Text <input type="color" id="dark.subredditTextColor"></label>
+        <label>Background <div class="rt-color-swatch" id="dark.subredditBgColor"></div></label>
+        <label>Border <div class="rt-color-swatch" id="dark.subredditBorderColor"></div></label>
+        <label>Text <div class="rt-color-swatch" id="dark.subredditTextColor"></div></label>
       </fieldset>
       <fieldset>
         <legend>Comments Badge</legend>
-        <label>Background <input type="color" id="dark.commentsBgColor"></label>
-        <label>Border <input type="color" id="dark.commentsBorderColor"></label>
-        <label>Text <input type="color" id="dark.commentsTextColor"></label>
+        <label>Background <div class="rt-color-swatch" id="dark.commentsBgColor"></div></label>
+        <label>Border <div class="rt-color-swatch" id="dark.commentsBorderColor"></div></label>
+        <label>Text <div class="rt-color-swatch" id="dark.commentsTextColor"></div></label>
       </fieldset>
       <button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
     </div>
@@ -70,6 +70,7 @@
     </div>
   </div>
   <script src="../lib/settings.js"></script>
+  <script src="../content/tweaks/color-picker.js"></script>
   <script src="popup.js"></script>
 </body>
 </html>
diff --git a/popup/popup.js b/popup/popup.js
index fbcc99d..99149ed 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,7 +1,10 @@
 (function () {
   "use strict";
 
-  const COLOR_KEYS = [
+  var picker = null;
+  var activeSwatchEl = null;
+
+  var COLOR_KEYS = [
     "light.subredditBgColor",
     "light.subredditBorderColor",
     "light.subredditTextColor",
@@ -21,13 +24,48 @@
     return val;
   }
 
+  function getColorValue(el) {
+    return el.dataset.value || "#ffffff";
+  }
+
+  function setColorValue(el, val) {
+    el.dataset.value = val;
+    el.style.backgroundColor = val;
+  }
+
+  function openPickerForSwatch(swatchEl) {
+    if (!picker) {
+      picker = window.RedditTweaks.colorPicker.create();
+    }
+
+    if (picker.isOpen() && activeSwatchEl === swatchEl) {
+      closePicker();
+      return;
+    }
+    closePicker();
+
+    activeSwatchEl = swatchEl;
+    var parent = swatchEl.closest("label") || swatchEl.parentNode;
+    parent.parentNode.insertBefore(picker.el, parent.nextSibling);
+
+    picker.open(getColorValue(swatchEl), function (hex) {
+      setColorValue(swatchEl, hex);
+      saveFromControls();
+    });
+  }
+
+  function closePicker() {
+    if (picker && picker.isOpen()) picker.close();
+    activeSwatchEl = null;
+  }
+
   function populateControls(settings) {
     document.getElementById("enabled").checked = settings.enabled;
     document.getElementById("darkMode").value = settings.darkMode;
 
     COLOR_KEYS.forEach(function (key) {
-      const el = document.getElementById(key);
-      if (el) el.value = colorToHex(settings[key]);
+      var el = document.getElementById(key);
+      if (el) setColorValue(el, colorToHex(settings[key]));
     });
 
     renderSubredditOverrides(settings.subredditColors || {});
@@ -59,6 +97,7 @@
     removeBtn.className = "btn-remove";
     removeBtn.textContent = "\u00d7";
     removeBtn.addEventListener("click", function () {
+      closePicker();
       entry.remove();
       saveFromControls();
     });
@@ -80,27 +119,27 @@
     var lightColors = modeColors && modeColors.light ? modeColors.light : {};
     var darkColors = modeColors && modeColors.dark ? modeColors.dark : {};
 
-    var bgInput = document.createElement("input");
-    bgInput.type = "color";
-    bgInput.value = colorToHex(lightColors.bg);
-    bgInput.title = "Background";
+    var bgSwatch = document.createElement("div");
+    bgSwatch.className = "rt-color-swatch";
+    setColorValue(bgSwatch, colorToHex(lightColors.bg));
+    bgSwatch.title = "Background";
 
-    var borderInput = document.createElement("input");
-    borderInput.type = "color";
-    borderInput.value = colorToHex(lightColors.border);
-    borderInput.title = "Border";
+    var borderSwatch = document.createElement("div");
+    borderSwatch.className = "rt-color-swatch";
+    setColorValue(borderSwatch, colorToHex(lightColors.border));
+    borderSwatch.title = "Border";
 
-    var textInput = document.createElement("input");
-    textInput.type = "color";
-    textInput.value = colorToHex(lightColors.text);
-    textInput.title = "Text";
+    var textSwatch = document.createElement("div");
+    textSwatch.className = "rt-color-swatch";
+    setColorValue(textSwatch, colorToHex(lightColors.text));
+    textSwatch.title = "Text";
 
-    colorsDiv.appendChild(bgInput);
-    colorsDiv.appendChild(borderInput);
-    colorsDiv.appendChild(textInput);
+    colorsDiv.appendChild(bgSwatch);
+    colorsDiv.appendChild(borderSwatch);
+    colorsDiv.appendChild(textSwatch);
 
     entry._colorState = {
-      light: { bg: bgInput.value, border: borderInput.value, text: textInput.value },
+      light: { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) },
       dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
     };
     entry._hadOverride = {
@@ -110,32 +149,34 @@
     entry._dirtyModes = { light: false, dark: false };
 
     modeSelect.addEventListener("change", function () {
+      closePicker();
       var prev = modeSelect.value === "dark" ? "light" : "dark";
       entry._dirtyModes[prev] = true;
-      entry._colorState[prev] = { bg: bgInput.value, border: borderInput.value, text: textInput.value };
+      entry._colorState[prev] = { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) };
       var next = entry._colorState[modeSelect.value];
-      bgInput.value = next.bg;
-      borderInput.value = next.border;
-      textInput.value = next.text;
+      setColorValue(bgSwatch, next.bg);
+      setColorValue(borderSwatch, next.border);
+      setColorValue(textSwatch, next.text);
     });
 
-    [nameInput, bgInput, borderInput, textInput].forEach(function (input) {
-      input.addEventListener("change", function () {
-        if (input !== nameInput) {
-          entry._dirtyModes[modeSelect.value] = true;
-        }
-        saveFromControls();
+    [bgSwatch, borderSwatch, textSwatch].forEach(function (swatch) {
+      swatch.addEventListener("click", function () {
+        openPickerForSwatch(swatch);
       });
     });
 
+    nameInput.addEventListener("change", function () {
+      saveFromControls();
+    });
+
     entry.appendChild(header);
     entry.appendChild(modeRow);
     entry.appendChild(colorsDiv);
 
     entry._nameInput = nameInput;
-    entry._bgInput = bgInput;
-    entry._borderInput = borderInput;
-    entry._textInput = textInput;
+    entry._bgSwatch = bgSwatch;
+    entry._borderSwatch = borderSwatch;
+    entry._textSwatch = textSwatch;
     entry._modeSelect = modeSelect;
 
     list.appendChild(entry);
@@ -150,9 +191,9 @@
 
       var currentMode = entry._modeSelect.value;
       entry._colorState[currentMode] = {
-        bg: entry._bgInput.value,
-        border: entry._borderInput.value,
-        text: entry._textInput.value,
+        bg: getColorValue(entry._bgSwatch),
+        border: getColorValue(entry._borderSwatch),
+        text: getColorValue(entry._textSwatch),
       };
 
       var entryOverrides = {};
@@ -171,15 +212,15 @@
   }
 
   async function saveFromControls() {
-    const settings = {
+    var settings = {
       enabled: document.getElementById("enabled").checked,
       darkMode: document.getElementById("darkMode").value,
       subredditColors: collectSubredditOverrides(),
     };
 
     COLOR_KEYS.forEach(function (key) {
-      const el = document.getElementById(key);
-      if (el) settings[key] = el.value;
+      var el = document.getElementById(key);
+      if (el) settings[key] = getColorValue(el);
     });
 
     try {
@@ -190,24 +231,30 @@
   }
 
   async function init() {
-    const settings = await window.RedditTweaks.loadSettings();
+    var settings = await window.RedditTweaks.loadSettings();
     populateControls(settings);
 
     document.getElementById("enabled").addEventListener("change", saveFromControls);
     document.getElementById("darkMode").addEventListener("change", saveFromControls);
 
     COLOR_KEYS.forEach(function (key) {
-      const el = document.getElementById(key);
-      if (el) el.addEventListener("input", saveFromControls);
+      var el = document.getElementById(key);
+      if (el) {
+        el.addEventListener("click", function () {
+          openPickerForSwatch(el);
+        });
+      }
     });
 
     document.getElementById("addSubreddit").addEventListener("click", function () {
+      closePicker();
       addSubredditEntry("", {});
     });
 
     document.getElementById("resetLight").addEventListener("click", async function () {
-      const settings = await window.RedditTweaks.loadSettings();
-      const DEFAULTS = window.RedditTweaks.DEFAULTS;
+      closePicker();
+      var settings = await window.RedditTweaks.loadSettings();
+      var DEFAULTS = window.RedditTweaks.DEFAULTS;
       Object.keys(DEFAULTS).forEach(function (key) {
         if (key.startsWith("light.")) settings[key] = DEFAULTS[key];
       });
@@ -216,8 +263,9 @@
     });
 
     document.getElementById("resetDark").addEventListener("click", async function () {
-      const settings = await window.RedditTweaks.loadSettings();
-      const DEFAULTS = window.RedditTweaks.DEFAULTS;
+      closePicker();
+      var settings = await window.RedditTweaks.loadSettings();
+      var DEFAULTS = window.RedditTweaks.DEFAULTS;
       Object.keys(DEFAULTS).forEach(function (key) {
         if (key.startsWith("dark.")) settings[key] = DEFAULTS[key];
       });
@@ -227,8 +275,9 @@
 
     document.getElementById("resetAll").addEventListener("click", async function () {
       if (confirm("Reset all settings to defaults?")) {
+        closePicker();
         await window.RedditTweaks.resetSettings();
-        const settings = await window.RedditTweaks.loadSettings();
+        var settings = await window.RedditTweaks.loadSettings();
         populateControls(settings);
       }
     });